コントローラでフィルタを使用する場合、ng-repeat配列を更新します。

Question

ng-repeatを使用してテーブルにデータを格納する配列があります。私は、特定の変数columnFilterの値に基づいて配列をフィルタリングするフィルタをコントローラに適用しています。今、私はその変数を変更すると私のテーブルビューは更新されていません。つまり、変数が変更されると、フィルタは再適用されません。 | filter: expression構文を使用する方法を伝えるすべての答えに

JS

var myApp = angular.module('myApp',[]); 
 

 

 
function MyCtrl($scope, $filter) { 
 
    $scope.name = 'Superhero'; 
 
    $scope.col={name:""}; 
 
    $scope.TableData = [{ 
 
     name: "2017/03/01-14", 
 
     specification: "1wk", 
 
    }, 
 
    { 
 
     name: "2017/03/01-17", 
 
     specification: "Set-04", 
 
    }, 
 
    { 
 
     name: "2017/03/04-11", 
 
     specification: "1wk", 
 
    }, 
 
    { 
 
     name: "2017/04/01-14", 
 
     specification: "1wk", 
 
    }, 
 
    { 
 
     name: "2017/03/10-10", 
 
     specification: "Set-04", 
 
    }, 
 
    { 
 
     name: "2017/03/10-10", 
 
     specification: "Set-04", 
 
    } 
 
    $scope.TableDataFiltered = $filter('filter')($scope.TableData, $scope.col); 
 
}

HTML

<div ng-controller="MyCtrl"> 
 
<input type="text" ng-model="col.name"> 
 
<table> 
 
<thead> 
 
    <tr> 
 
    <th>name</th> 
 
    <th>spec</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr ng-repeat="item in TableDataFiltered"> 
 
    <td>{{item.name}}</td> 
 
    <td>{{item.specification}}</td> 
 
    </tr> 
 
</tbody> 
 
</table> 
 
</div>

---

、私はそれについて知っているが、実際のアプリは他のフィルタを持っていますコントローラ自体をフィルタリングする必要があります。 （私はそれが私の上だが、その点は非常に明確にしない最小限の例を提供していない）

Answer 1

コントローラで$scope.TableDataFilteredを定義する必要が、ちょうどあなたのテンプレートでフィルタを使用します。

<tr ng-repeat="item in TableDataFiltered | filter : col.name">

Answer 2

あなただけのインラインsynthaxを使用し、このために特定の機能を記述する必要はありません。

<tbody> 
    <tr ng-repeat="item in TableDataFiltered | filter: col.name"> 
    <td>{{item.name}}</td> 
    <td>{{item.specification}}</td> 
    </tr> 
</tbody> 

Answer 3

あなたのhtml角度からフィルタを使用する場合、それが使用する変数を見て、再評価表現たびにそれをします変更。あなたのコードからフィルタを呼び出したい場合は、同じことを行う必要があります：

var myApp = angular.module('myApp',[]); 


function MyCtrl($scope, filterFilter) { 
    $scope.name = 'Superhero'; 
    $scope.col={name:""}; 
    $scope.TableData = [...]; 

    $scope.$watch('col', function(newCol) { 
     $scope.TableDataFiltered = filterFilter($scope.TableData, newCol); 
    }); 
} 

注意また、あなたが直接使用するフィルターを注入できることを、あなたは上でそれを見てする必要はありませんフィルタプロバイダごとに毎回。ドキュメントから：このため

、 あなたのコントローラ/サービス/ディレクティブにフィルター>名前< FILTERNAMEとの依存関係を注入。例えば。 numberと呼ばれるフィルタは、dependency numberFilterを使用して挿入された です。注入された引数 は、第1引数としてフォーマットする値と、第2引数で始まる フィルタパラメータをとる関数です。

あなたは、コントローラからのフィルタを使用するつもりなら、あなたはおそらく、その場合には、あなたはそれ普通の変数作ることができ、$scopeでフィルタリングされていないデータを公開する必要がある、または移動しないことに注意コントローラからのテーブルデータをサービスに変換します。そうすれば、データを使ってコントローラー（制御しているはずのもの）を乱雑にすることを避けることができます。