Angular JS filter検索入力付きの配列

Question

私の問題は、すでに入力した検索入力フィールドを作成し、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> 

これは私の選択、すべての関数である：

$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機能を意味します。どのように私はこれを行う必要があります誰も考えを持っていますか？

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

つまりは次にコントローラにあなたはFYI $scope.filtered

---

あなたにアクセスすることができます。

Answer 1

これを行う最も簡単な方法は、フィルタリングされたリストに名前を付けることです変更可能{{ $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"/>

次のngの変更を設定することにより、あなたはあなたのコントローラで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; 
 
     } 
 
     } 
 
    } 
 
    }