AngularJS自定义过滤器用法经典实例总结-偶像资源网

本文实例讲述了AngularJS自定义过滤器用法。分享给大家供大家参考，具体如下：

过滤器结构

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

示例一：是否包含

<!doctype html>
<html ng-app=\"myApp\">
<head>
  <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/>
  <script src=\"http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js\"></script>
</head>
<body>
<div ng-controller=\"myAppCtrl\">
  <div>
    <table>
      <tr>
        <th>Name</th>
        <th>Phone</th>
      </tr>
      <!--写法1-->
      <tr ng-repeat=\"friend in friends |myfilter\">
      <!--写法2-->
<!--<tr ng-repeat=\"friend in newArr=(friends | myfilter)\">-->
        <td>{{friend.name}}</td>
        <td>{{friend.phone}}</td>
      </tr>
    </table>
  </div>
</div>
<script type=\"text/javascript\">
  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;
    }
  });
</script>
</body>
</html>

示例二：倒序

<!doctype html>
<html ng-app=\"myApp\">
<head>
  <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/>
  <script src=\"http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js\"></script>
</head>
<body>
<div ng-controller=\"myAppCtrl\">
  姓名:{{ name }}<br>
  倒序:{{ name | reverse }}<br>
  倒序并大写:{{ name | reverse:true }}
</div>
<script type=\"text/javascript\">
  var myAppModule = angular.module(\"myApp\", []);
  myAppModule.controller(\"myAppCtrl\", [\"$scope\", function ($scope) {
    $scope.name = \"xuqiang\";
  }]);
  myAppModule.filter(\"reverse\", function () {
    return function (input, uppercase) {
      <!--input就是其中name代表的值。-->
      <!--uppercase这个bool值，判断是否要进行大小写转换。-->
      var out = \"\";
      for (var i = 0; i < input.length; i++) {
        out = input.charAt(i) + out;
      }
      if (uppercase) {
        out = out.toUpperCase();
      }
      return out;
      <!--返回过滤后的字符串-->
    }
  });
</script>
</body>
</html>

示例三：替换

<!doctype html>
<html ng-app=\"myApp\">
<head>
  <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/>
  <script src=\"http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js\"></script>
</head>
<body ng-controller=\"myAppCtrl\">
<div>
  <div>
    {{welcome | replaceHello}}<br/>
    {{welcome | replaceHello:3:5}}<br/>
  </div>
</div>
<script type=\"text/javascript\">
  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/, \'您好\');
    }
  });
</script>
</body>
</html>

示例四：筛选

<!doctype html>
<html ng-app=\"a3_3\">
<head>
  <title>自定义过滤器</title>
  <script src=\"../Script/angular.min.js\"
      type=\"text/javascript\"></script>
  <style type=\"text/css\">
    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;
    }
  </style>
</head>
<body>
<div ng-controller=\"c3_3\">
  <ul>
    <li ng-class=\"{{bold}}\">
      <span>序号</span>
      <span>姓名</span>
      <span>性别</span>
      <span>年龄</span>
      <span>分数</span>
    </li>
    <li ng-repeat=\" stu in data | young:0\"
      ng-class-odd=\"\'odd\'\"
      ng-class-even=\"\'even\'\">
      <span>{{$index+1}}</span>
      <span>{{stu.name}}</span>
      <span>{{stu.sex}}</span>
      <span>{{stu.age}}</span>
      <span>{{stu.score}}</span>
    </li>
  </ul>
</div>
<script type=\"text/javascript\">
  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 < e.length; i++) {
        if (e[i].age > 22 && e[i].age < 28 &&
          e[i].sex == _sex)
          _out.push(e[i]);
      }
      return _out;
    }
  });
</script>
</body>
</html>

示例五：排序

<!doctype html>
<html ng-app=\"a3_4\">
<head>
  <title>表头排序</title>
  <script src=\"../Script/angular.min.js\"
      type=\"text/javascript\"></script>
  <style type=\"text/css\">
    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;
    }
  </style>
</head>
<body>
<div ng-controller=\"c3_4\">
  <ul>
    <li ng-class=\"{{bold}}\">
      <span>序号</span>
      <span ng-click=\"title=\'name\';desc=!desc\">
          姓名
        </span>
      <span ng-click=\"title=\'sex\';desc=!desc\">
          性别
        </span>
      <span ng-click=\"title=\'age\';desc=!desc\">
          年龄
        </span>
      <span ng-click=\"title=\'score\';desc=!desc\">
          分数
        </span>
    </li>
    <li ng-repeat=\" stu in data | orderBy : title : desc\">
    <!--title：属性值，desc：升序or降序-->
      <span>{{$index+1}}</span>
      <span>{{stu.name}}</span>
      <span>{{stu.sex}}</span>
      <span>{{stu.age}}</span>
      <span>{{stu.score}}</span>
    </li>
  </ul>
</div>
<script type=\"text/javascript\">
  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}
    ];
  }])
</script>
</body>
</html>

示例六：输入过滤

<!doctype html>
<html ng-app=\"a3_5\">
<head>
  <title>字符查找</title>
  <script src=\"../Script/angular.min.js\"
      type=\"text/javascript\"></script>
  <style type=\"text/css\">
    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;
    }
  </style>
</head>
<body>
<div ng-controller=\"c3_5\">
  <div>
    <input id=\"txtkey\" type=\"text\"
        ng-model=\"key\" placeholder=\"请输入姓名关键字\"/>
  </div>
  <ul>
    <li ng-class=\"{{bold}}\">
      <span>序号</span>
      <span>姓名</span>
      <span>性别</span>
      <span>年龄</span>
      <span>分数</span>
    </li>
    <li ng-repeat=\" stu in data | filter : {name:key}\">
      <span>{{$index+1}}</span>
      <span>{{stu.name}}</span>
      <span>{{stu.sex}}</span>
      <span>{{stu.age}}</span>
      <span>{{stu.score}}</span>
    </li>
  </ul>
</div>
<script type=\"text/javascript\">
  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}
    ];
  }])
</script>
</body>
</html>

参考：

【angularjs实战】

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

AngularJS自定义过滤器用法经典实例总结

请登录后发表评论