js框架——angular.js(5)

1. 3种过滤方式

 <html>
<head>
<meta charset='utf-8'>
<script src="js/angular.js"></script>
<script src="js/app.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body ng-app="MyApp">
<div ng-controller="MyCtrl"> <h3>Filter by String</h3>
<form class="form-inline">
<input ng-model="query" type="text" placeholder="Filter by name" autofocus>
</form>
<ul ng-repeat="friend in friends | filter: query | orderBy: 'name' ">
<li>{{friend.name}} ({{friend.age}})</li>
</ul>
</div> <div ng-controller="MyCtrl">
<h3>Filter by Object</h3>
<form class="form-inline">
<input ng-model="query" type="text" placeholder="Filter by name and age=20">
</form>
<ul ng-repeat="friend in friends | filter: { name: query, age: '20' } | orderBy: 'name' ">
<li>{{friend.name}} ({{friend.age}})</li>
</ul>
</div> <div ng-controller="MyCtrl">
<h3>Filter by Predicate Function</h3>
<ul ng-repeat="friend in friends | filter: filterFunction | orderBy: 'name' ">
<li>{{friend.name}} ({{friend.age}})</li>
</ul>
</div>
</body>
</html>
 var app = angular.module("MyApp", []);

 app.controller("MyCtrl", function($scope) {
$scope.friends = [
{ name: "Peter", age: 20 },
{ name: "Pablo", age: 55 },
{ name: "Linda", age: 20 },
{ name: "Marta", age: 37 },
{ name: "Othello", age: 20 },
{ name: "Markus", age: 32 }
]; $scope.filterFunction = function(element) {
return element.name.match(/^Ma/) ? true : false;
}; });

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

根据变量过滤。

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

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

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

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

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

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

上一篇:SQL With As 用法


下一篇:秒味课堂Angular js笔记------Angular js中的工具方法