Question

我正在查看代码，却遇到了这行代码，无法弄清楚。

<table>
    <tr>
        <td align="right">Search :</td>
        <td><input ng-model="query[queryBy]" /></td>
    </tr>
    <tr>
        <td align="right">Search By :</td>
        <td>
            <select ng-model="queryBy">
                <option value="name">NAME</option>
                <option value="company">COMPANY</option>
                <option value="designation">DESIGNATION</option>
            </select>
        </td>
    </tr>
</table>
<hr>
<div>
    <table>
        <tr>
            <th>Employee Name</th>
            <th>Company Name</th>
            <th>Designation</th>
        </tr>
        <tr ng-repeat="emp in employees | filter:query">
            <td>{{emp.name}}</td>
            <td>{{emp.company}}</td>
            <td>{{emp.designation}}</td>
        </tr>
    </table>

[queryBy]在查询[queryBy]中意味着什么？

JS：

$scope.query = {};
$scope.queryBy = '';

Answer 1

<input ng-model="query[queryBy]" />

此输入将显示对象 query 中值为 queryBy 的属性。

例如，

$scope.query = {
    name: "someName",
    company: "someCompany",
    designation: "someDesignation"
};

然后，当用户选择NAME时，输入将显示 someName 。

如果用户选择COMPANY，则输入将显示 someCompany 。

如果用户选择指定，则输入将显示 someDesignation 。

更新

重点是，下面的过滤器中使用了 query 。

<tr ng-repeat="emp in employees | filter:query">
    <td>{{emp.name}}</td>
    <td>{{emp.company}}</td>
    <td>{{emp.designation}}</td>
</tr>

它将像这样使用。用户键入用于搜索的关键字，然后选择用户要搜索的查询类型，然后将在过滤器中使用查询对象，以便相应地显示数据。

带支架的ng-model

1 个答案: