当前位置： 移动技术网 > IT编程>网页制作>CSS > AngularJS使用$watch与$filter过滤器制作数据筛选实例（代码教程）

AngularJS使用$watch与$filter过滤器制作数据筛选实例（代码教程）

2018年03月04日  | 移动技术网IT编程  | 我要评论

AngularJS使用$watch与$filter过滤器制作数据筛选实例，代码如下：

在搜索框中输入不同文字，然后表格中展示相应的搜索结果：

01	<!DOCTYPE html>
02	<html lang="en">
03	<head>
04	    <meta charset="UTF-8">
05	    <title>Title</title>
06	    <style type="text/css">
07	        .ng-cloak{display:none;}
08	        td{height:30px;line-height:30px;padding:0px 10px;text-align:center;}
09	    </style>
10	</head>
11	<body ng-app="app" ng-controller="ctrl" ng-cloak class="ng-cloak">
12	    <input type="text" ng-model="search" ng-model-options="{'updateOn':'blur'}"/>
13	    <table cellpadding="0" cellspacing="0" border="1">
14	        <thead>
15	            <tr>
16	                <td>姓名</td>
17	                <td ng-click="orderBy('age')">年龄</td>
18	                <td>性别</td>
19	                <td ng-click="orderBy('click')">点击</td>
20	            </tr>
21	        </thead>
22	        <tbody>
23	            <tr ng-repeat="v in tmp">
24	                <td>{{v.user}}</td>
25	                <td>{{v.age}}</td>
26	                <td>{{v.sex}}</td>
27	                <td>{{v.click}}</td>
28	            </tr>
29	        </tbody>
30	    </table>
31	</body>
32	</html>
33	<script type="text/javascript" src="../js/angular.min.js"></script>
34	<script type="text/javascript">
35	    var m = angular.module('app', []);
36	    m.controller('ctrl', ['$scope', '$filter', function($scope, $filter){
37	        $scope.search = '';
38	        $scope.data = [
39	            {user:'张三', age:23, sex:'男', click:100},
40	            {user:'李四', age:26, sex:'女', click:200},
41	            {user:'王五', age:24, sex:'男', click:300},
42	        ];
43	        //临时数据
44	        $scope.tmp = {};
45	        $scope.$watch('search', function(n, o){
46	            $scope.tmp = $filter('filter')($scope.data, n);
47	        })
48	    }]);
49	</script>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网