ドロップダウン選択に基づくangularJSの条件付きモデルバインド

Question

私のテキストボックスにバインドされるモデルを決定するためにチェックされるモデルプロパティにバインドされたドロップダウンがあるとします。

ユーザーが検索がそのオフに基づいてされ、それはそれは次のように表示されている searchQuery.idまたは searchQuery.Firstname

可能性のいずれか、選んだものは何でも

<select ng-model="searchType"> 
    <option value="Id">Id</option> 
    <option value="Firstname">Firstname</option> 
</select> 

：私は、コードを使用しようとした

<tr ng-repeat="user in users | orderBy:sortColumn:sortDescending | filter:searchQuery"> 
     <td>{{ user.Id }}</td> 
     <td>{{ user.Firstname }}</td> 
     <td>{{ user.LastName }}</td> 
</tr> 

getter/setterを使用している同様のトピックから、私はそれを動作させるように見えることはできません。

どうすればよいですか？

Answer 1

$scope.search = {}のようなコントローラ内のオブジェクトはsearchであり、そのフィルタに検索オブジェクトを配置できます。

<select ng-model="searchType"> 
    <option value="Id">Id</option> 
    <option value="Firstname">Firstname</option> 
</select> 
<input class="form-control" ng-model="search[searchType]" ng-disabled="!searchType.length"/> 

<tr ng-repeat="user in users | orderBy:sortColumn:sortDescending | filter: search"> 
    <td>{{ user.Id }}</td> 
    <td>{{ user.Firstname }}</td> 
    <td>{{ user.LastName }}</td> 
</tr> 

---

上記動作しますけれどもが、あなたは意図したとおり、それは今で動作しますドロップダウン変更した場合。ドロップダウンの値を変更すると、searchオブジェクトがクリアされます。検索がより正確になるように。

ng-repeat="user in users | .... | filter:conditionalSearch()" 

してから、コントローラ/リンクでこれを追加します：私は間違っていない場合は、あなたがこれを行うことができ

Demo Plunkr

Answer 2

$scope.conditionalSearch = function() { 
    if ($scope.searchType == 'id') return { .. condition 1 .. } 
    if ($scope.searchType == 'firstName') return { .. condition 2 .. } 
}