AngularJS使用$watch与$filter过滤器制作数据筛选实例（代码教程）
程序员文章站
2022-05-03 08:57:41
AngularJS使用$watch与$filter过滤器制作数据筛选实例，代码如下：
在搜索框中输入不同文字，然后表格中展示相应的搜索结果：
01
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> 上一篇： 阿呆幽默爆笑说美式足球
下一篇： 讲台上幽默笑话比较多