javascript - 基于下拉选择的angularJS中的条件模型绑定(bind)

Question

假设我有一个绑定(bind)到模型属性的下拉列表，将检查该属性以确定将绑定(bind)到我的文本框的模型。

<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

您可以像 $scope.search = {} 一样在 Controller 中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