在没有模型绑定的情况下响应 angular 中的下拉选择更改

Question

我有一个下拉列表，应该会导致在更改时获取数据。我不需要通过两种方式绑定到下拉列表的模型。我只希望它最初填充一个部门列表，当用户 select 是一个时，它会获取该部门的用户列表。

select 看起来像这样：

<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 后，下拉列表将不会保留任何值，任何 selection 都将被删除。

所有我想要发生的事情是，当用户 select 是一个部门时，它将该部门的 ID 传递给 getUsersInDepartment，然后它将获取用户列表。但是现在永远不会调用 getUsersInDepartment。

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

我的控制器看起来像：

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 的尝试：

<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部门定义为：

$scope.selectedDepartment = {};

Answer 1

解决方案是避免使用任何 angular 指令装饰 <select> 元素，而是将 ng-click 放在每个 <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>

Answer 2

制作自定义指令应该可以解决这个问题。

    angular
        .module('my_module')
        .directive('ngCustomChange', function($parse) {
            return function(scope, element, attrs) {
                var fn = $parse(attrs.ngCustomChange);
                element.bind('change', function(event) {
                    scope.$apply(function() {
                        event.preventDefault();
                        fn(scope, {$event:event});
                    });
                });
            };
    });

<select ng-custom-change="$ctrl.myFunction()">
  <option value="1">Value 1</option>
  <option value="2">Value 2</option>
</select>

在没有模型绑定的情况下响应 angular 中的下拉选择更改

Responding to drop down selection change in angular without model binding

angularjs

angularjs-ng-change