依赖ng-models输入框，选择Angular js

Question

我有一个文本框和一个下拉框。我希望在ng-repeat部分中基于上述两个控件进行过滤。

意味着如果我在下拉框和文本框中选择名称，因为我键入过滤应该基于名称工作如果在下拉菜单中，如果我选择employeeid，那么过滤应该是基于Employee的。

<input id="txtSearchText" ng-model="searchText"/>
<select>
    <option>name</option>
    <option>EmployeeID</option>
</select>
<div ng-repeat="u in users">
name :  {{u.name}}  ||  EID: {{u.eid}}  : 
<!-- here i want result -->
</div>

Answer 1

domakas引导您到上面的链接应该有所帮助，但这个示例略有不同，因为它使用3个不同的文本输入框进行过滤。

你在这里漏掉了一些东西。首先，您需要在用户div的ng-repeat中应用一个过滤器。

<div ng-repeat="u in users | searchText">

您在这里遇到的问题，我相信您已经意识到，它将过滤用户数组中的所有值。您似乎只想过滤下拉列表中指定的users数组中的值。这意味着我们必须以某种方式将过滤器与下拉菜单绑定，以使其动态。

我要做的是使过滤器成为一个对象，而不仅仅是纯文本。

$scope.searchText = {name: '', eid: ''};

现在您需要将输入框的模型绑定到该对象，但是它存储值的位置需要根据下拉菜单

的值进行动态设置。

<input id="txtSearchText" ng-model="searchText[filter]" />
<select ng-model="filter">
    <option value="name" selected>name</option> 
    <option value="eid">EmployeeID</option>
</select>

上面的代码将把下拉列表的值存储在searchText对象的正确值中。这意味着过滤器现在将使用该对象来过滤出usersdiv中的结果，而不仅仅是字符串，它将与完整的JSON对象进行比较。

编辑:

在'searchText'对象上添加了一个手表，以便在切换下拉菜单时清除其他值。如果没有这个，旧的过滤值仍然在'searchText'对象中，这导致它对两个值进行过滤。

    $scope.$watch('filter', function() {
        if($scope.filter == "eid") {
            $scope.searchText.name = '';
        } else {
            $scope.searchText.eid = '';
        }
    });

下面是一个JSFiddle工作示例:

http://jsfiddle.net/glandrum101/NM5A5/1/