使用$watch与$filter过滤器实现数据筛选(小案例)

发布时间:2016-12-29 编辑:小张个人博客 查看次数:4551

效果图:

77.jpg

具体代码如下:

<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>


出处:小张个人博客

网址:http://blog.023xs.cn/

您的支持是对博主最大的鼓励,感谢您的认真阅读。欢迎转载,但请保留该声明。

顶部

Copyright © 小张个人博客 All Rights Reserved 渝ICP备15006773号-1

联系方式:[email protected] | 本站文章仅供学习和参考

渝公网安备 50024102500267号