角1.5.x - 変数を組み込みのフィルタに渡す

Question

私は選択と入力フィールドに基づいてデータをフィルタリングしようとしています。ここに私のコードの一部です：

<select ng-change="students.changeValue(changeFilter)" ng-model="changeFilter"> 
    <option ng-selected="true" value="name">Name</option> 
    <option value="age">Age</option> 
</select> 
<input ng-model="searchPhrase" /> 

名前と年齢は私が持っているキーの例です。ここに私のデータ生成構造は次のとおりです。

<div ng-class="{breakLine: $index % 3 === 0}" 
    class="student-item col-md-4" 
    ng-repeat="s in students.studentsList | filter:{searchFilter: searchPhrase}"> 

searchFilterを変数から設定されているが、それは動作しませんキーであると考えられます。私がそこに何かを作るなら：filter:{name: searchPhrase}それは私のデータ構造にそのようなキーを持っているので動作します。だから私は手動で例えば書くとき：| filter:{name: searchPhrase}が、それは動作します

.controller('StudentsListCtrl', ['$scope', function($scope) { 

    $scope.searchFilter = ''; 
    this.changeValue = function(val) { 
     console.log(val); ---> gives key or age on change 
     $scope.searchFilter = val; 
    } 

：ここ

は、コントローラの一部です。しかし、「名前」（つまりキー）を | filter:{searchFilter: searchPhrase}のような変数に渡すと、それは壊れてしまいます。

これはどのように修正できますか？

Answer 1

あなたが最後を使用する必要がありますexpressionのfilter documentationに記載されたオプション：

関数（値、インデックス、配列）：A p redicate関数を使用して任意のフィルタを書き込むことができます。この関数は、要素、そのインデックス、および配列全体を引数として配列の各要素に対して呼び出されます。

コントローラでは、次のように述語を定義します。

$scope.personFilter = function(person) { 
    // return true if this person should be displayed 
    // according to the defined filter 
} 

ng-repeat filterで使用してください。

<ul> 
    <li ng-repeat="p in persons | filter:personFilter">{{p.name}} ({{p.age}})</li> 
</ul> 

デモはplunkerを参照してください。注意述語関数を簡略化するために、ageをstringと選択します。あなたはあなたの必要に応じてそれを洗練することができます。

Answer 2

フィルタに渡されたオブジェクトを生成するために、あなたの$スコープで関数を書く：

$scope.getFilterObject = function() { 
    var filterObject = {}; 
    filterObject[$scope.searchFilter] = $scope.searchPhrase; 
    return filterObject; 
} 

は、フィルタ内の引数として使用してください：

ng-repeat="s in students.studentsList | filter:getFilterObject()"