Отвечая на изменение выбора в раскрывающемся списке в angular без привязки модели

У меня есть раскрывающийся список, который должен вызывать выборку данных при изменении. Мне не нужна двусторонняя привязка к модели для раскрывающегося списка. Я просто хочу, чтобы он изначально был заполнен списком отделов, и когда пользователь выбирает один, он получает список пользователей в этом отделе.

Выбор выглядит так:

<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-change без ng-model, но это не помогло, так как ng-change по какой-то причине требует ng-model. Я попытался установить ng-model на нулевую и пустую строку, но ничего не получилось. Я также пытался вообще не использовать ng-change и использовать onchange, но getUsersInDepartment не может быть найден через onchange, так как он подключен к моему контроллеру. Если для ng-model задано значение DepartmentList, в раскрывающемся списке не будет значения, любой выбор будет стерт.

Все, что я хочу, это то, что когда пользователь выбирает отдел, он передает идентификатор этого отдела в 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>

selectedDepartment определяется как:

$scope.selectedDepartment = {};

person Legion    schedule 13.12.2015    source источник
comment
Я не понимаю, почему вы не хотите использовать ng-модель, это так просто и понятно... Так и должно быть...   -  person Gianmarco    schedule 14.12.2015
comment
Я нахожу это запутанным и тупым.   -  person Legion    schedule 14.12.2015
comment
Я не думаю, что есть другой способ, который не является взломом в angular. Мое мнение — использовать его и не тратить слишком много времени на размышления о том, как этого избежать, вместо этого я сосредоточусь на том, чтобы иметь четкое представление о том, как это работает и как это больше не будет сбивать с толку.   -  person Gianmarco    schedule 14.12.2015
comment
Я нахожу это запутанным и тупым - Что? прямо сейчас вы пытаетесь вызвать функцию JQuery через обработчик angular ng-click, но думаете, что использование только angular — это бесполезно? Все это можно сделать в одном выражении, используя ng-options.   -  person Claies    schedule 14.12.2015
comment
Ни в моем приложении, ни в этом примере нет JQuery.   -  person Legion    schedule 14.12.2015
comment
ng-options было первым, что я попробовал, но это не сработало. Выбор не будет заполнен. Когда я переключился на ng-repeat, он заполнился.   -  person Legion    schedule 14.12.2015
comment
document.getElementById определенно не угловатый. Я рад, что вы нашли способ решить эту проблему без использования angular, но я думаю, что ng-options сработало бы нормально; Однако трудно сказать наверняка, почему это не сработало для вас, не видя кода, который вы пробовали.   -  person Claies    schedule 14.12.2015
comment
Я обновил свою оригинальную попытку ng-options.   -  person Legion    schedule 14.12.2015


Ответы (2)


Решение состоит в том, чтобы не украшать элемент <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>
person Legion    schedule 14.12.2015
comment
Не работает, а также неправильно устанавливать событие click в теге option. - person Jaydeep Mor; 14.02.2018
comment
Что, если вы измените значение с помощью клавиатуры, а не щелчком мыши? - person Wouter; 18.04.2019

Создание пользовательской директивы должно работать для этой проблемы.

    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>

person Martijn ten Hoor    schedule 14.10.2020