zoukankan      html  css  js  c++  java
  • angular的过滤器

    angular有一些自带的过滤器,今天我就来写一下。

    首先还是先把导入一个angular插件,再在我们的js中把模块和控制台写上(别忘了在html中写入模块名和在body中写入控制台名,当然控制台名可以视情况而定写在哪)

    因为我们老用数组,所以先写一下截取数组长度的;先在控制台中写一个数组,再在html中用angular的写法写入;

    截取数组长度

    $scope.arr = [1,2,3,4,5,6,7];  //js的控制台中创建数组

    {{arr | limitTo:数组长度}};

    排序

    $scope.brr = ['b', 'l', 'a', 'c', 'e', 'h'];//在js的控制台中创建数组

    {{brr | orderBy}};  //htmljs中控制台中的数组引出并排序;如果是英文就按字母排,汉字按首字母.数字就按大小;

    添加符号

    $scope.a = 50; //js的控制台中创建数值

    {{a | currency:"¥"}}  //如果有需要钱币符号或特殊符号我们可以这么写

    大写和小写

    $scope.str = "dawdaJKNKawdBBJw"; //js的控制台中写一个带有大写和小写字母的字符串

    {{str | uppercase}}  //大写

    {{str | lowercase}}  //小写

    千分位

    $scope.nub = 116516116;  //js控制台中写一个长的数值

    {{nub | number}}  //讲数值用千分位的方式分开

    时间的过滤器

    $scope.shijian = new Date().getTime();//js控制台中获取一下时间戳

    {{shijian | date:'yyyy-MM-dd hh:mm:ss EEEE'}} //yyyy年份 MM月份 dd日期 hh小时 mm分钟 ssEEEE星期但是是英文的

    搜索过滤器

    $scope.crr = [{name: '土豆',price: 5,nbm: 0},

          {name: '茄子',price: 6,nbm: 0},

           {name: '黄瓜',price: 8,nbm: 0}];//js控制台中创建一个数据来用来搜索

    <input type="text" ng-model="xx"/>

    <ul>

      <li ng-repeat="i in crr | filter:xx">{{i.name}}</li>

    </ul>

    html中先创建一个文本框来获取一下要搜索的数据,再将数据从数据中导出后在依照搜索的内容显示和隐藏

    如果你想自己来定义一个过滤器也是可以的

    我先写一个让首字符大写的

    $scope.str1='welcome to china';

    app.filter('变量名',function(){

      return function(input){

      return input.replace(/w+/g,function(s){

      return s.charAt(0).toUpperCase()+s.substring(1);

    })

    {{str1 | 变量名}}  //通过变量名来寻找到自己定义的过滤器

  • 相关阅读:
    vue 传参动态
    a href="tel" 拨打电话
    vue中rem的转换
    请求接口的封装
    http request 请求拦截器,有token值则配置上token值
    node溢出
    vue菜单切换
    vue的table切换
    vue页面初始化
    [论文笔记] Legacy Application Migration to the Cloud: Practicability and Methodology (SERVICES, 2012)
  • 原文地址:https://www.cnblogs.com/Z-Xin/p/7041719.html
Copyright © 2011-2022 走看看