Условная привязка модели в angularJS на основе раскрывающегося списка

Question

Скажите, что у меня есть выпадающий список, привязанный к свойству модели, которое будет проверено, чтобы определить модель, привязанную к моему текстовому полю.

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

независимо пользователь выбрал, поиск будет базироваться вне, что и он может быть либо searchQuery.id или searchQuery.Firstname

Это отображается следующим образом:

<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

Вы можете указать search объект внутри контроллера, например $scope.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 при изменении выпадающего значения. Так что поиск будет более точным.

Demo Plunkr

Answer 2

, если я не ошибаюсь, вы можете сделать это:

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

, а затем в контроллере/ссылку добавить следующее:

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