js框架——angular.js（5）

1. 3种过滤方式

 1 <html>
 2   <head>
 3     <meta charset='utf-8'>
 4     <script src="js/angular.js"></script>
 5     <script src="js/app.js"></script>
 6     <link rel="stylesheet" href="css/bootstrap.css">
 7   </head>
 8   <body ng-app="MyApp">
 9     <div ng-controller="MyCtrl">
10 
11       <h3>Filter by String</h3>
12       <form class="form-inline">
13         <input ng-model="query" type="text" placeholder="Filter by name" autofocus>
14       </form>
15       <ul ng-repeat="friend in friends | filter: query | orderBy: 'name' ">
16         <li>{{friend.name}} ({{friend.age}})</li>
17       </ul>
18     </div>
19 
20     <div ng-controller="MyCtrl">
21       <h3>Filter by Object</h3>
22       <form class="form-inline">
23         <input ng-model="query" type="text" placeholder="Filter by name and age=20">
24       </form>
25       <ul ng-repeat="friend in friends | filter: { name: query, age: '20' } | orderBy: 'name' ">
26         <li>{{friend.name}} ({{friend.age}})</li>
27       </ul>
28     </div>
29 
30     <div ng-controller="MyCtrl">
31       <h3>Filter by Predicate Function</h3>
32       <ul ng-repeat="friend in friends | filter: filterFunction | orderBy: 'name' ">
33         <li>{{friend.name}} ({{friend.age}})</li>
34       </ul>
35     </div>
36   </body>
37 </html>

 1 var app = angular.module("MyApp", []);
 2 
 3 app.controller("MyCtrl", function($scope) {
 4   $scope.friends = [
 5     { name: "Peter",   age: 20 },
 6     { name: "Pablo",   age: 55 },
 7     { name: "Linda",   age: 20 },
 8     { name: "Marta",   age: 37 },
 9     { name: "Othello", age: 20 },
10     { name: "Markus",  age: 32 }
11   ];
12 
13   $scope.filterFunction = function(element) {
14     return element.name.match(/^Ma/) ? true : false;
15   };
16 
17 });

3种过滤方式，第一种——

根据变量过滤。

第一个过滤中，我们对着input使用了ng-model，使得过滤条件中添加了filter: query

乍一看没什么问题，运行起来也还可以，但是问题是当我们输入数字的时候，连后面的年龄也会变成搜索条件，如果对象中的属性只有几个还好说，一旦多起来，这个过滤根本就是不可行的。

【所以我们需要将滤过变得更加精确。】

结果就是第二个过滤，根据对象提供的条件进行过滤，过滤条件变成了对象filter: { name: query, age: '20' }，这便使得我们过滤的更加方便和精确。

第三种过滤方法是通过函数进行过滤。

当我们对着filter：进行修改，将值改成true的时候，你会发现没有一个符合的数值出现，而改为false，就会出现所有的信息。于是，只要我们创建一个判断函数，这个函数需要带入判断对象作为参数并返回一个布尔值，那么这个函数就可以当过滤器使用了，并且，由于是个函数，所以过滤机制便可以写的复杂的多。

js框架——angular.js（5）

相关推荐