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

angularJS中的条件模型绑定基于下拉选择

2 个答案: