Question

我有一个文本框和一个下拉列表。我希望根据上述两种控制过滤ng-repeat部分。

表示如果我在下拉列表和文本框中选择名称，因为我键入过滤应该基于名称工作如果我在下拉列表中选择EployeeID，那么过滤应该基于员工。

<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对象的正确值中。这意味着过滤器现在将使用此对象过滤掉用户div中的结果，而不仅仅是一个字符串，它将与完整的JSON对象进行比较。

修改

在＆＃39; searchText＆＃39;上添加了一个手表如果切换下拉列表，则清除另一个值。如果没有这个，旧的过滤器值仍然在＆＃39; searchText＆＃39;对象，它导致它过滤两个值。

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

这是一个带有工作示例的JSFiddle：

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

依赖ng-model输入框并选择Angularjs

1 个答案: