Angular：过滤所选选项和用户输入的值

Question

我需要过滤数据集。我的表格看起来像这样：

<select>
    <option>Age</option>
    <option>CustomerID</option>
    <option>ProductID</option>
<select>

<input type="text" name="select-option-value">

我想要实现的是用户选择一个选项，例如年龄。然后在输入框中输入age的值。只有在输入框中输入了选项和值时，才会对这两个表单元素执行过滤。

我该怎么做？

Answer 1

您需要在ng-model列表中使用<select>以存储过滤器的类型，并在ng-model上使用<input>以存储值{}过滤器。过滤器的值存储在由过滤器类型索引的search对象中。见下文：

HTML

<select ng-model="filterType">
    <option value="age">Age</option>
    <option value="customerId">CustomerID</option>
    <option value="productId">ProductID</option>
</select>
<input type="text" name="select-option-value" ng-model="search[filterType]">

<div ng-repeat="person in persons | filter: search">{{person.name}}</div>

控制器：

app.controller('DemoCtrl', function ($scope) {
    $scope.search = {};
    $scope.persons = [...];
});

这是 demo of how all that works 。只需选择一个类型过滤器，然后输入一个值。