почему-то `$ scope.selected` не заполнено нужным контентом - PullRequest
0 голосов
/ 11 ноября 2019

Как получить выбранные значения множественного выбора с помощью 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, поэтому я был бы признателен за любую помощь.

1 Ответ

0 голосов
/ 11 ноября 2019

Используйте только один контроллер:

<body ng-controller="Configurator">
    <div ̶n̶g̶-̶c̶o̶n̶t̶r̶o̶l̶l̶e̶r̶=̶"̶C̶o̶n̶f̶i̶g̶u̶r̶a̶t̶o̶r̶"̶ >
        <select multiple ng-model="selected"
                ng-options="x.name for x in fields">      
        </select>  
    </div>
    {{selected}}
    <button  ̶n̶g̶-̶c̶o̶n̶t̶r̶o̶l̶l̶e̶r̶=̶"̶C̶o̶n̶f̶i̶g̶u̶r̶a̶t̶o̶r̶"̶ ng-click="move() ">Move</button>

    <div ̶n̶g̶-̶c̶o̶n̶t̶r̶o̶l̶l̶e̶r̶=̶"̶C̶o̶n̶f̶i̶g̶u̶r̶a̶t̶o̶r̶"̶ >
        <select multiple ng-model="selected2" 
                ng-options="x.name for x in chosen">      
        </select>  
    </div>
</body>

Каждая директива ng-controller создает дочернюю область, и поскольку ng-model связывает свойство области, оно будет скрыто от родительских областей.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...