javascript - 带支架的ng-model

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

<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]在query [queryBy]中是什么意思？

JS：

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

最佳答案

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

此输入将显示对象查询中queryBy值的属性。

例如，

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

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

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

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

更新

关键是在下面的过滤器中使用了查询。

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

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

关于javascript - 带支架的ng-model，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52773473/