Angular JS 用搜索输入过滤一个数组

Question

所以，我的问题是我想创建一个搜索输入字段，我已经完成了，并且我在 ng-repeat 中使用了搜索过滤器。我现在想做的是 select 我使用 select all checkbox.In 搜索的所有项目，此时当我单击 select all 复选框时，它会检查我所有的我的数组中的项目不是我搜索的项目。

这是我的 html:

<div class="modal-body">
                    <div>
                        <md-input-container flex> <label>Search</label>
                        <input ng-model="search.name"> </md-input-container>
                        <md-button class="md-primary" ng-click="saveValues()">Update</md-button>
                        </div>



    <div class="md-list">
     <md-checkbox ng-model="modelItemsList.allItemsSelected" 
                        ng-change="selectAll()">
                        Select all
                         </md-checkbox>
                            <md-list> <md-list-item class="md-3-line"
                                ng-repeat="mod

elItem in modelItemsList | filter:search">
                        <div class="md-list-item-text">
                            <md-checkbox ng-model="modelItem.isChecked " aria-label="Checkbox 1" ng-change="selectModelItem(modelItem)">
                            <h3>{{ $eval('modelItem.'+propertyName) }}</h3>
                            <p>{{ $eval('modelItem.'+propertyDesc) }}</p>
                             </md-checkbox>
                        </div>
                        </md-list-item> </md-list> 
                    </div>
                </div>

这是我的 select 所有功能：

$scope.selectAll = function(){
                 console.debug("searchText", $scope.search);
                 //filteredArray = filterFilter($rootScope.modelItemsList, $scope.search);
                 //console.log(filteredArray);
                 console.log($rootScope.modelItemsList.allItemsSelected);
                 $rootScope.temp = [];
                 console.log($scope.modelItemsList);
                 $rootScope.modelItemsList.allItemsSelected = !$rootScope.modelItemsList.allItemsSelected;
                 console.log($rootScope.modelItemsList.allItemsSelected);
                 if($rootScope.modelItemsList.allItemsSelected){
                    for (var i = 0; i < $scope.modelItemsList.length; i++) {
                        $rootScope.temp.push($scope.modelItemsList[i].name);
                        console.log($scope.modelItemsList[i].name);
                        $scope.modelItemsList[i].isChecked = $rootScope.modelItemsList.allItemsSelected;
                        console.log($scope.modelItemsList[i].isChecked);
                        console.log($rootScope.modelItemsList.allItemsSelected);
                    }
                 }
                 else if (!$rootScope.modelItemsList.allItemsSelected){
                     for (var i = 0; i < $scope.modelItemsList.length; i++) {
                     $scope.modelItemsList[i].isChecked = $rootScope.modelItemsList.allItemsSelected;
                     $rootScope.temp = [];
                     console.log($scope.modelItemsList[i].isChecked);
                     }
                }
            }

我想我应该制作某种过滤器，但我不太确定。我的意思是在我的 JS 文件中 select 所有函数。有人知道我该怎么做吗？

Answer 1

最简单的方法是命名筛选列表：

即

<md-list-item class="md-3-line" ng-repeat="modelItem in filtered = ( modelItemsList | filter:search )">
    ...
</md-list-item>

然后在控制器中你可以访问$scope.filtered

仅供参考

您可以将 {{ $eval('modelItem.'+propertyDesc) }} 更改为 {{ modelItem[propertyDesc] }}

Answer 2

对不起，您的问题不是很清楚。据我了解，这就是您想要的。

What I want now to do is to select all the items I searched for using the select all checkbox

查看这个 plunkr 的实现。

https://plnkr.co/edit/vjzJEm8Wck8b5iUD4qz8?p=preview

您可以通过在 select 所有复选框

上设置 ng-change 来做到这一点

<input type="checkbox" ng-change="selectAllFiltered()" ng-model="checkbox.value2" ng-true-value="true" ng-false-value="false"/>

接下来，您将在控制器中定义 selectAllFiltered 方法。 objective是在过滤数组的时候在$scope.filtered数组上设置isSelected。

并且当数组未过滤时，即 search.name 字段中没有字符串，然后在 $scope.modelItemsList 数组上设置 isSelected。

您的控制器方法应如下所示...

$scope.selectAllFiltered = function() {

    if ($scope.checkbox.selectAll) {
      $scope.checkbox.selectAll = false;
    } else {
      $scope.checkbox.selectAll = true;
    }
    
    if (!$scope.search.name) {
      console.log('when no name is entered')
      for (var i = 0; i < $scope.modelItemsList.length; i++) {
        if (angular.isUndefined($scope.modelItemsList[i].isSelected)) {
          $scope.modelItemsList[i].isSelected = $scope.checkbox.selectAll;
        } else {
          $scope.modelItemsList[i].isSelected = !$scope.modelItemsList[i].isSelected;
        }

      }
    } else {
      console.log('when some name is entered');
      for (var i = 0; i < $scope.filtered.length; i++) {
        if (angular.isUndefined($scope.filtered[i].isSelected)) {
          $scope.filtered[i].isSelected = $scope.checkbox.selectAll;
        } else {
          $scope.filtered[i].isSelected = !$scope.filtered[i].isSelected;
        }
      }
    }
  }

Angular JS 用搜索输入过滤一个数组

Angular JS filter an array with search input

html

javascript

filter

angularjs

angularjs-filter