Javascript AngularJS按搜索过滤并检查过滤值_Javascript_Angularjs

Javascript AngularJS按搜索过滤并检查过滤值

javascript angularjs

Javascript AngularJS按搜索过滤并检查过滤值,javascript,angularjs,Javascript,Angularjs,在我的应用程序中，我使用类似于此jsbin的东西：但我有一个麻烦如果我有大量的数据会怎么样？过滤器不是最佳实践。。。所以为了表现我使用了ng show。但我还有一个问题：如何使用selectAll按钮仅选择可见值所以我不使用过滤器：因为它会影响性能，而是使用： <!DOCTYPE html> <html> <head> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.

在我的应用程序中，我使用类似于此jsbin的东西：

但我有一个麻烦

如果我有大量的数据会怎么样？过滤器不是最佳实践。。。所以为了表现我使用了ng show。但我还有一个问题：如何使用selectAll按钮仅选择可见值

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

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


JS-Bin
全选！
列表名
{{list.name}
{{list.isSelected}

现在我如何处理仅显示的元素？不是所有的人

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

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

jsbin链接：

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

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

现在我这样做了：我仍然使用ng show，但我使用watcher获得过滤阵列：

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

不明白你的意思）可能在jsBin中更改它？hm：加载页面->放入搜索按钮1->单击全选->从输入中删除1。所有项目都已选定。不是我需要。。。在此之后，只需检查列表1。我尝试在jsbin中进行一些更改，希望我做得对。单击“单击我”按钮可在控制台中查看已过滤阵列的日志。该操作无效。这里是视频。毕竟，只能选择一个列表1，但实际上是2。对不起，我不能保证。为了获得良好的性能，我建议使用其他组件，如ng grid，而不是ng repeat。希望其他人会有更好的解决方案

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

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