角：在选定的选项，用户输入的值滤波 [英] Angular: filtering on selected option and user entered value

问题描述

我有必要对数据集进行过滤。我的表格将是这个样子：

I have a need to filter on a dataset. My form will look something like this:

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

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

我想实现的是用户选择的选项，比如说年龄的例子。然后，年龄在输入框中输入一个值。只有当一个选项，并值在输入框中输入了将筛选的这两个表单元素来执行。

What I want to achieve is the user selects an option, say age for example. Then enter a value for age in the input box. Only when an option and value has been entered in the input box will the filtering be performed on both of these form elements.

我将如何做到这一点？

推荐答案

您需要使用 NG-模型在＆LT;选择＆GT; 列表，以便存储过滤器的类型， NG-模型在＆LT;输入＆GT; 以便存储过滤器的值。过滤器的值存储在搜索的过滤器类型索引对象。见下图：

You need to use ng-model on the <select> list so as to store the type of the filter, and ng-model on the <input> so as to store the value of the filter. The value of the filter is stored in a search object indexed by the filter type. See below:

<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 = [...];
});

---

下面是一个 如何将所有的演示，工程 。只需选择一个类型的过滤器，然后输入一个值。

---

Here is a demo of how all that works. Just select a type filter, and enter a value.

这篇关于角：在选定的选项，用户输入的值滤波的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！