Conditional Modell in AngularJS Bindung basierend aus der Drop-down-Auswahl

Question

sagt, dass ich ein Dropdown habe sich auf ein Modell Eigenschaft gebunden ist, die das Modell überprüft werden, um zu bestimmen, die zu meiner Textbox gebunden werden.

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

, was der Benutzer ausgewählt, wird die Suche ab, dass basieren und es könnte entweder searchQuery.id oder searchQuery.Firstname

Es wird angezeigt, wie dies:

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

Ich habe versucht, den Code zu verwenden, von einem ähnlichen Thema, das die getter/setter verwendet, aber ich kann nicht scheinen, damit es funktioniert.

Wie mache ich das?

Answer 1

Sie können search Objekt in Controller wie $scope.search = {} sein und dann Suchobjekt über diesen Filter platzieren.

<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> 

---

Obwohl oben arbeiten, aber wenn Sie Dropdown ändern wird nun wie vorgesehen. Löschen Sie also das Objekt search, wenn Sie den Dropdown-Wert ändern. Diese Suche wäre also genauer.

Demo Plunkr

Answer 2

wenn ich mich nicht irre, können Sie dies tun:

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

und dann in Ihrem Controller/Link hinzufügen dies:

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