使用$watch与$filter过滤器实现数据筛选(小案例)
发布时间:2016-12-29 编辑:小张个人博客 查看次数:6225
效果图:
具体代码如下:
<div ng-app="hd" ng-controller="_an" ng-cloak class="ng-cloak"> <div class="container"> 搜索:<input type="text" ng-model="search" /> <table class="table table-striped"> <tr> <td >#</td> <td>姓名</td> <td >年龄</td> </tr> <tr ng-repeat="v in lists"> <td>{{v.id}}</td> <td>{{v.name}}</td> <td>{{v.age}}</td> </tr> </table> </div> </div> <script src="./js/AngularJS.js"></script> <script> var m = angular.module('hd',[]); m.controller('_an',['$scope','$filter',function($scope,$filter){ $scope.data=[ {id:1 , name:'王二', age:23}, {id:2 , name:'张三', age:29}, {id:3 , name:'李四', age:27} ]; // 用于显示临时数据 $scope.lists = $scope.data; $scope.$watch('search',function(n,o){ //console.log(n); $scope.lists = $filter('filter')($scope.data,n); }); }]); </script>
Copyright © 小张个人博客 All Rights Reserved 渝ICP备15006773号-1
联系方式:[email protected] | 本站文章仅供学习和参考