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

2019-11-19 13:49:46

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：Angular实现模版驱动表单的自定义校验功能(密码确认为例)

下一篇：对mac下nodejs 更新到最新版本的最新方法(推荐)