Question

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

这是我的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>

这是我的全部选择功能：

$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函数。有谁知道我该怎么做？

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

对不起，但你的问题并不是很清楚。据我所知，这就是你想要的。

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

查看此plunkr已实施的位置。

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

您可以通过在全选复选框上设置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字段中没有字符串，则在isSelected数组上设置$scope.modelItemsList。

这是你的控制器方法应该是什么样的......

＆＃13;

$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;
        }
      }
    }
  }

＆＃13;

Angular JS使用搜索输入过滤数组

2 个答案: