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

0

Итак, моя проблема в том, что я хочу создать поле ввода поиска, которое я уже сделал, и я использую фильтр поиска в 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>

Это моя функция 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. Кто-нибудь знает, как мне это сделать?

  • 0
    Я не уверен, почему вы хотите использовать $ eval в представлении, это плохая практика, и я не понимаю, почему вам нужно сделать это здесь.
Теги:
angularjs-filter
filter

2 ответа

0
Лучший ответ

Самый простой способ сделать это - назвать отфильтрованный список:

т.е.

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

Поделиться
  • 0
    Я уже сделал эту часть. Я хочу проверить, содержит ли мой массив modelItemsList то, что я искал. Что-то вроде сравнения modelItemsList с отфильтрованным массивом
  • 0
    Я не совсем уверен, что вы имеете в виду?
Показать ещё 5 комментариев
0

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

Теперь я хочу выбрать все элементы, которые я искал, используя флажок "Выбрать все".

Проверьте этот plunkr, где он был реализован.

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

Способ, которым вы можете это сделать, - установить ng-change на вашем флажке select all

<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.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;
        }
      }
    }
  }
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню