Как получить выбранные значения множественного выбора с помощью AngularJS?
Прежде всего: мне известен модуль раскрывающегося списка Angular Multiselect, который я не хочу использовать! Вариант использования требует другого типа множественного выбора, который позволяет HTML <select multiple>
, и я пытаюсь реализовать способ перемещения элементов вокруг двух из этих списков.
Я уже разработал некоторый код, который должно работать, но как-то $scope.selected
не заполнено нужным контентом (или вообще). К настоящему времени, Я думаю, что это должно быть проблемой с настройкой контроллера (я довольно плохо знаком с JavaScript), поскольку переход на ng-model
работал с более простым примером.
index.html
<!doctype html>
<html ng-app="demo">
<head>
<title>Hello AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="start.js"></script>
</head>
<body>
<div ng-controller="Configurator">
<select multiple ng-model="selected"
ng-options="x.name for x in fields">
</select>
</div>
{{selected}}
<button ng-controller="Configurator" ng-click="move() ">Move</button>
<div ng-controller="Configurator">
<select multiple ng-model="selected2"
ng-options="x.name for x in chosen">
</select>
</div>
</body>
</html>
start.js
angular.module('demo', [])
.controller('Configurator', function($scope, $http) {
$http.get('http://localhost:8080/fields').
then(function(response) {
$scope.fields = response.data;
console.log(response.data);
});
$scope.selected;
$scope.chosen;
$scope.selected2;
$scope.move = function() {
console.log('function working');
$scope.chosen = $scope.selected.slice();
$scope.fields = $scope.fields.filter(x => !$scope.selected.includes(x));
}
});
Почему приведенный выше код не работает так, как я ожидаю? ng-model
должен динамически сохранять JSONObjects, выбранные в элементе multiselect в элементе $scope.selected
, но он пустой каждый раз, когда я проверяю через вывод консоли, и, таким образом, второй множественный выбор не заполняется при нажатии кнопки. Что я делаю неправильно? Есть ли проблема с областью, потому что я получаю элементы через HTTP-запрос? Нужно ли инициализировать $scope.selected
как массив или переместить его в другую область? Честно говоря, у меня нет идей и вещей для Google, поэтому я был бы признателен за любую помощь.