Question

在我的应用程序中，我使用类似于此jsbin的内容：http://jsbin.com/vefoqofuzo/1/edit?html,js,output

<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div ng-app="listsModule">
    <div ng-controller="listsController">

      <input type="text" id="filter_lists" class="form-control" ng-model="search"
                           placeholder="Search a list">

      <table class="table table-hover ng-cloak table-condensed ng-cloak">
                    <thead>
                    <tr>
                        <th><input type="checkbox" ng-model="checkAll"/></th>
                        <th>List name</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="list in lists | filter:search | orderBy:'name'"
                        ng-click="selectCheckbox(list)">
                        <td><input type="checkbox" ng-model="list.isSelected" ng-checked="checkAll"></td>
                        <td>{{ list.name }}</td>
                        <td>{{ list.isSelected }}</td>
                    </tr>
                    </tbody>
                </table>


    </div>
  </div>



</body>
</html>

和js：

var app = angular.module('listsModule', []);

app.controller('listsController', function ($scope) {

  $scope.lists = [
    {"id": 39, "name": "list1", "isSelected": false}, 
    {"id": 40, "name": "list2", "isSelected": false}
]

});

但我有一个麻烦...

如果我有大量的数据，会是什么？过滤器不是最好的做法......所以对于性能我使用ng-show。但后来我有疑问：如何用selectAll按钮只选择可见值？

http://jsbin.com/curifaliqa/1/edit?html,js,output

所以我不使用过滤器：因为它会影响性能，而是使用：

<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div ng-app="listsModule">
    <div ng-controller="listsController">
      <div ng-click="selectAll()" style="background:red">Select all!</div>
      <input type="text" id="filter_lists" class="form-control" ng-model="search"
                           placeholder="Search a list">

      <table class="table table-hover ng-cloak table-condensed ng-cloak">
                    <thead>
                    <tr>
                        <th><input type="checkbox" ng-model="checkAll"/></th>
                        <th>List name</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="list in lists | orderBy:'name'" ng-show="([list] | filter:search).length > 0"
                        ng-click="selectCheckbox(list)">
                        <td><input type="checkbox" ng-model="list.isSelected" ng-checked="checkAll"></td>
                        <td>{{ list.name }}</td>
                        <td>{{ list.isSelected }}</td>
                    </tr>
                    </tbody>
                </table>


    </div>
  </div>



</body>
</html>

现在我怎么能处理只显示的元素？不是所有人......

Answer 1

现在我这样做：我仍然使用ng-show但我使用观察者来获取过滤后的数组：

  $scope.$watch('search', function(newVal, oldVal) {
    $scope.filteredArray = $filter('filter')($scope.users, newVal);
  });

Answer 2

如何在javascript中再次应用此过滤器，如下所示：

var arrayAfterFilter = $scope.lists.filter(
    function(list, index) {
        var result = $filter('filter')([list], $scope.search);
        return result.length;
    }
);

jsbin链接：http://jsbin.com/qemotufeva/1/edit?html,js,output

编辑：我稍微更新了selectAll函数，因此会忽略与搜索文本不匹配的项目

$scope.selectAll = function(){
        angular.forEach($scope.lists, function(item) {
          var result = $filter('filter')([item], $scope.search);
          if(result.length) {
            item.isSelected = true;  
          }          
        });
  };

http://jsbin.com/seqabevoxu/1/edit?html,js,output

AngularJS通过搜索过滤并检查过滤后的值

2 个答案: