Question

抱歉标题不好，我真的不知道如何更好地表达它，如果有人会编辑它以使其更符合我的想法，那就太好了。

我想做的是点击公司 - ＆gt;这会加载所有给定的公司部门，当我点击某个部门时，会显示其中的所有职位。

模板：

            <label>
                <span style="float: left; width: 100px;">Company</span>
                <select multiple style="width: 670px; float: left; height: 150px;">
                    <option>All</option>
                    <option disabled="disabled">-----------------------</option>
                    <option ng-repeat="employee in employees | unique: 'company'" ng-bind="employee.company.name"></option>
                </select>
            </label>

            <label>
                <span style="float: left; width: 100px;">Department</span>
                <select multiple style="width: 670px; float: left; height: 150px;">
                    <option>All</option>
                    <option disabled="disabled">-----------------------</option>
                    <option ng-repeat="employee in employees | unique: 'department'" ng-bind="employee.department.name"></option>
                </select>
            </label>

            <label>
                <span style="float: left; width: 100px;">Position</span>
                <select multiple style="width: 670px; float: left; height: 150px;">
                    <option>All</option>
                    <option disabled="disabled">-----------------------</option>
                    <option ng-repeat="employee in employees | unique: 'position'" ng-bind="employee.position.name"></option>
                </select>
            </label>

控制器：

$scope.employees = ContactsApi.Employee.query().$promise.then(function(response) {
    return response;
});

Answer 1

您需要在当前作用域上为下拉列表的当前值创建三个属性（如currentCompany，currentDepartment和currentEmployee），将它们绑定到select标记并为每个属性创建监视。然后，在使用$ watch设置的回调函数中，您可以加载下一个下拉列表的值（您可能还希望在本地缓存这些值）。有关详细信息，请参阅this section （对不起，简短的回答，稍后我会尝试添加更多细节。）

如何使用AngularJS链接下拉菜单？

1 个答案: