35

angularでは、次のようなフィルター式を書くことができます

<input type="text" ng-model="query">

<table>
    <tr ng-repeat="phone in phones | filter: query">
       <td>{{phone.vendor}}</td>
       <td>{{phone.model}}</td>
    </tr>
</table>

テーブルが更新queryされ、 に入力したテキストに一致する電話だけが表示されますinput。

[phone object]現在表示されている s などのフィルタの対応する結果配列を変数 (スコープ変数など) で取得するにはどうすればよいですか?

4

2 に答える 2

81

実際には、角度式で新しい変数をスコープに割り当てることができます。したがって、最も簡単な解決策は行うことです<tr ng-repeat="phone in (filteredPhones = (phones | filter: query))">。filteredPhones は、現在のスコープ内の変数になりました。この plnkr の例を参照してください。

于 2013-04-17T07:19:47.897 に答える
19

コントローラー内では、テキストへの変更を監視しquery、Javascript に相当する を使用できます。{expression} | filter: {expression}これは、挿入する必要がある service から名前が$filter('filter')付けられたフィルターを使用することです。'filter'$filter

HTML スニペットがコントローラーMyControllerによって制御されているとしましょう。次に、次のように変更できます。

myApp.controller("MyController", ["$scope", "$filter", function($scope, $filter) {

    $scope.$watch('query', function(newVal, oldVal) {
      console.log("new value in filter box:", newVal);

      // this is the JS equivalent of "phones | filter: newVal"
      $scope.filteredArray = $filter('filter')($scope.phones, newVal);
    });
}]);

変更するたびqueryに、フィルタリングされた配列が $scope として利用可能になり、スニペットで式としてfilteredArray使用できます。filteredArray

これはすべて、実際にはhttp://docs.angularjs.org/api/ng.$filterおよびhttp://docs.angularjs.org/api/ng.filter:filterで文書化する必要があります。ただし、最初のリンクのドキュメントはまばらすぎて、実際にはコメントから 2 番目のリンクまでしか取得できません。ドキュメントに追加しようとしましたが、angular を複製してドキュメントをビルドした後、ブラウザー経由でそれらにアクセスすることはできず、API のナビゲートは有用なエラーなしでサイレントに失敗したため、それをあきらめました。

于 2013-04-17T02:42:37.440 に答える