AngularJS使用$watch与$filter过滤器制作数据筛选实例,代码如下:
在搜索框中输入不同文字,然后表格中展示相应的搜索结果:
04 | <meta charset= "UTF-8" > |
06 | <style type = "text/css" > |
07 | .ng-cloak{display:none;} |
08 | td{height:30px;line-height:30px;padding:0px 10px;text-align:center;} |
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" > |
17 | <td ng-click= "orderBy('age')" >年龄</td> |
19 | <td ng-click= "orderBy('click')" >点击</td> |
23 | < tr ng-repeat= "v in tmp" > |
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){ |
39 | {user: '张三' , age:23, sex: '男' , click:100}, |
40 | {user: '李四' , age:26, sex: '女' , click:200}, |
41 | {user: '王五' , age:24, sex: '男' , click:300}, |
45 | $scope.$ watch ( 'search' , function (n, o){ |
46 | $scope.tmp = $filter( 'filter' )($scope.data, n); |
|