Angular JS用搜索输入过滤数组

Angular JS filter an array with search input

本文关键字：过滤 数组 输入 搜索 JS Angular      更新时间：2023-09-26

所以，我的问题是我想创建一个搜索输入字段，这是我已经做过的，我在ng-repeat中使用搜索过滤器。我现在要做的是使用select all复选框选择我搜索的所有项目。在这一刻，当我点击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 all函数: 
$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 all函数。有人知道我应该怎么做吗?

最简单的方法是命名过滤列表:

ie 

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

很抱歉，你的问题不是很清楚。据我所知，这就是你想要的。

我现在要做的是使用select all复选框选择我搜索的所有项目

查看这个plunkr在哪里实现的

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

预览

你可以通过在你的select all复选框上设置ng-change来做到这一点。

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

接下来，您将在控制器中定义selectAllFiltered方法。目标是在筛选数组时将isSelected设置在$scope.filtered数组上。

当数组未被过滤时，即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;
        }
      }
    }
  }

相关文章：