Угловой JS фильтр массив с поисковым вводом

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

---

FYI

вам может изменить {{ $eval('modelItem.'+propertyDesc) }} на {{ modelItem[propertyDesc] }}

Answer 2

Извините, но вы не очень поняли в своем вопросе. Насколько я понимаю, это то, что вы хотите.

То, что я хочу сейчас сделать, это выбрать все элементы, я искал с помощью выбери весь флажок

проверить эту plunkr, где он реализован.

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

, как вы могли бы сделать это путем создания нг-изменения на вашем выберите все флажок

<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 массив.

Вот что ваш метод контроллера должен выглядеть ...

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