无需模型绑定即可响应角度的下拉选择更改 [英] Responding to drop down selection change in angular without model binding

问题描述

我有一个下拉菜单，应该会导致更改时获取数据。对于下拉菜单，我不需要两种方式绑定到模型。我只希望它最初填充部门列表，并且当用户选择一个部门列表时，它会获得该部门的用户列表。

I have a drop down that should cause a data fetch on change. I don't need two way binding to a model for the drop down. I just want it initially populated with a list of departments and when a user selects one, it gets the list of users in that department.

选择看起来像这样：

<select class="form-control" id="selDepartmentList" ng-model="departmentList" ng-change="getUsersInDepartment(document.getElementById("selDepartmentList").options[document.getElementById("selDepartmentList").selectedIndex].value)">
        <option value="-1">All</option>
        <option ng-repeat="dept in departmentList"
                value="{{dept.DepartmentId}}">
                {{dept.DepartmentName}}
        </option>
</select>

我尝试了不带ng-model的ng-change，但是失败了，因为ng-change需要ng-model由于某些原因。我尝试将ng-model设置为null和空字符串，但均无效。我还尝试了完全不使用ng-change并使用onchange，但由于onchange附加在我的控制器上，因此无法通过它找到getUsersInDepartment。在将ng-model设置为departmentList的情况下，下拉列表将不保留任何值，所有选择都将被删除。

I tried ng-change without ng-model, but it fails since ng-change requires ng-model for some reason. I tried setting ng-model to null and empty string, but neither worked. I also tried not using ng-change at all and using onchange, but getUsersInDepartment can't be found through onchange since it's attached to my controller. With ng-model set to departmentList, the drop down won't hold a value, any selection is erased.

我想做的就是当用户选择一个部门，它将该部门的ID传递给getUsersInDepartment，然后将获取用户列表。但是现在从不调用getUsersInDepartment。

All I want to have happen is that when a user selects a department it passes the id for that department to getUsersInDepartment, which will then fetch the user list. But right now getUsersInDepartment is never called.

departmentList在我的控制器中定义并附加到$ scope。我见过的所有示例都具有绑定到下拉列表的某种selectedModelObject。我没有其中的一个。

departmentList is defined in my controller and attached to $scope. All the examples I've seen have some kind of selectedModelObject that they bind to the drop down. I don't have one of those.

我的控制器如下：

controller('AdminTableCtrl', function ( $scope, coreAPIservice ) {
    $scope.userList = [];
    $scope.departmentList = [];

    coreAPIservice.GetUserList().success(function (response) {
        $scope.userList = response;
    });

    coreAPIservice.GetDepartmentList().success(function (response) {
        $scope.departmentList = response;
    });

    $scope.getUsersInDepartment = function(deptId) {
        if(deptId === -1) {
            coreAPIservice.GetUserList().success(function (response) {
                $scope.userList = response;
            });
        }
        else {
            coreAPIservice.GetUsersInDepartmentList(deptId).success(function (response) {
                $scope.userList = response;
            });
        }
    }
});

编辑：

我最初的尝试ng-options：

My original attempt with ng-options:

<select class="form-control" id="selDepartment"
                                        ng-model="selectedDepartment"
                                        ng-options="dept as dept.DepartmentName for dept in departmentList track by dept.DepartmentId">
            <option value="">Select Team...</option>
</select>

selected部门定义为：

selectedDepartment is defined as:

$scope.selectedDepartment = {};

推荐答案

解决方案是避免装饰< select> 元素与任何角度指令，然后将 ng-click 放在每个< option> 。

The solution is to avoid decorating the <select> element with any angular directives and instead place ng-click on each <option>.

像这样：

<select class="form-control" id="selDepartmentList">
        <option value="-1" selected>All</option>
        <option ng-repeat="dept in departmentList"
                                ng-click="getUsersInDepartment(dept.DepartmentId)"
                                value="{{dept.DepartmentId}}">
                                {{dept.DepartmentName}}
        </option>
</select>

这篇关于无需模型绑定即可响应角度的下拉选择更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！