怎样使用AngularJS自定义过滤器用法

这次给大家带来怎样使用AngularJS自定义过滤器用法，使用AngularJS自定义过滤器用法的注意事项有哪些，下面就是实战案例，一起来看一下。

过滤器结构

{{带过滤数据 | 过滤器名：参数1：参数2：参数3.....}}app.filter('过滤器名', function () {    return function (待过滤数据, 参数....) {           ......      return 已过滤数据; }

登录后复制

示例一：是否包含

    
  
    
<!---->        
      
        
Name
        
Phone
      
            
      
{{friend.name}}
        
{{friend.phone}}
      
    
  
  var app = angular.module("myApp", []);  app.controller("myAppCtrl", ["$scope", function ($scope) {    $scope.friends = [{name: 'John', phone: '44555-1276'},      {name: 'Annie', phone: '800-BIG-MARY'},      {name: 'Mike', phone: '11555-4321'},      {name: 'Adam', phone: '33555-5678'},      {name: 'David', phone: '387555-8765'},      {name: 'Mikay', phone: '555-5678'}];  }]);  app.filter("myfilter", function () {    return function (input) {      var output = [];      angular.forEach(input, function (value, key) {        console.log("value==" + JSON.stringify(value));        console.log("value.phone类型==" + typeof (value.phone));        console.log("value.phone.indexOf==" + value.phone.indexOf("555"));        /*js中没有contains方法，使用indexOf来判断字符串是否包含*/        /*indexOf字符串出现的位置，没有则返回-1*/        //方法一：        if (value.phone.indexOf("555") >= 0) {          output.push(value);        }        //方法二：//        if (value.phone.indexOf("555") !== -1) {//          output.push(value);//        }      });      return output;    }  });

登录后复制

示例二：倒序

    
  姓名:{{ name }}
  倒序:{{ name | reverse }}
  倒序并大写:{{ name | reverse:true }}
  var myAppModule = angular.module("myApp", []);  myAppModule.controller("myAppCtrl", ["$scope", function ($scope) {    $scope.name = "xuqiang";  }]);  myAppModule.filter("reverse", function () {    return function (input, uppercase) {                  var out = "";      for (var i = 0; i < input.length; i++) {        out = input.charAt(i) + out;      }      if (uppercase) {        out = out.toUpperCase();      }      return out;          }  });

登录后复制

示例三：替换

    
  
    {{welcome | replaceHello}}
    {{welcome | replaceHello:3:5}}
  
  var app = angular.module("myApp", []);  app.controller("myAppCtrl", ["$scope", function ($scope) {    $scope.welcome = "Hello AngularJs";  }]);  //自定义过滤器  app.filter('replaceHello', function () {    return function (input, n1, n2) {      console.log("input==" + input);      console.log("n1==" + n1);      console.log("n2==" + n2);      return input.replace(/Hello/, '您好');    }  });

登录后复制

示例四：筛选

          body {      font-size: 12px;    }    ul {      list-style-type: none;      width: 408px;      margin: 0px;      padding: 0px;    }    ul li {      float: left;      padding: 5px 0px;    }    ul .odd {      color: #0026ff;    }    ul .even {      color: #ff0000;    }    ul .bold {      font-weight: bold;    }    ul li span {      width: 52px;      float: left;      padding: 0px 10px;    }    ul .focus {      background-color: #cccccc;    }  
  
    
      序号      姓名      性别      年龄      分数    
    
      {{$index+1}}      {{stu.name}}      {{stu.sex}}      {{stu.age}}      {{stu.score}}    
  
  var a3_3 = angular.module('a3_3', []);  a3_3.controller('c3_3', ['$scope', function ($scope) {    $scope.bold = "bold";    $scope.data = [      {name: "张明明", sex: "女", age: 24, score: 95},      {name: "李清思", sex: "女", age: 27, score: 87},      {name: "刘小华", sex: "男", age: 28, score: 86},      {name: "陈忠忠", sex: "男", age: 23, score: 97}    ];  }]);  a3_3.filter('young', function () {    return function (e, type) {      var _out = [];      var _sex = type ? "男" : "女";      for (var i = 0; i  22 && e[i].age < 28 &&          e[i].sex == _sex)          _out.push(e[i]);      }      return _out;    }  });

登录后复制

示例五：排序

          body {      font-size: 12px;    }    ul {      list-style-type: none;      width: 408px;      margin: 0px;      padding: 0px;    }    ul li {      float: left;      padding: 5px 0px;    }    ul .bold {      font-weight: bold;      cursor: pointer;    }    ul li span {      width: 52px;      float: left;      padding: 0px 10px;    }    ul .focus {      background-color: #cccccc;    }  
  
    
      序号                姓名                        性别                        年龄                        分数            
    
          {{$index+1}}      {{stu.name}}      {{stu.sex}}      {{stu.age}}      {{stu.score}}    
  
  var a3_4 = angular.module('a3_4', []);  a3_4.controller('c3_4', ['$scope', function ($scope) {    $scope.bold = "bold";    $scope.title = 'name';    $scope.desc = 0;    $scope.data = [      {name: "张明明", sex: "女", age: 24, score: 95},      {name: "李清思", sex: "女", age: 27, score: 87},      {name: "刘小华", sex: "男", age: 28, score: 86},      {name: "陈忠忠", sex: "男", age: 23, score: 97}    ];  }])

登录后复制

示例六：输入过滤

          body {      font-size: 12px;    }    ul {      list-style-type: none;      width: 408px;      margin: 0px;      padding: 0px;    }    ul li {      float: left;      padding: 5px 0px;    }    ul .bold {      font-weight: bold;      cursor: pointer;    }    ul li span {      width: 52px;      float: left;      padding: 0px 10px;    }    ul .focus {      background-color: #cccccc;    }  
  
      
  
    
      序号      姓名      性别      年龄      分数    
    
      {{$index+1}}      {{stu.name}}      {{stu.sex}}      {{stu.age}}      {{stu.score}}    
  
  var a3_5 = angular.module('a3_5', []);  a3_5.controller('c3_5', ['$scope', function ($scope) {    $scope.bold = "bold";    $scope.key = '';    $scope.data = [      {name: "张明明", sex: "女", age: 24, score: 95},      {name: "李清思", sex: "女", age: 27, score: 87},      {name: "刘小华", sex: "男", age: 28, score: 86},      {name: "陈忠忠", sex: "男", age: 23, score: 97}    ];  }])

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

怎样使用Vue中字符串模板

如何处理Mac安装thrift因bison报错

以上就是怎样使用AngularJS自定义过滤器用法的详细内容，更多请关注【创想鸟】其它相关文章！