Почему ngModel 'null' при переключении атрибута 'множественный' в select? - PullRequest
Новая
       7

Почему ngModel 'null' при переключении атрибута 'множественный' в select?

0 голосов
/ 24 января 2019

Я разрабатываю фрагмент кода для варианта использования, но, пытаясь сохранить его просто, я пошел на базовое упражнение по переключению multiple.

Проблема в том, что ngModel равно нулю, когда множественный атрибут select динамически переключается директивой, которая переключает атрибут с помощью привязки:

Ожидаемое поведение 

                                  Expected            Got
    Select and option:            ngModel: [1]    ✓ | ngModel: 1 ✓
    multiple = false
    [option]
    [  1  •]
    [  2   ]
    [  3   ]
                                  Expected            Got
    Select and option:            ngModel: [1, 3] ✓ | ngModel: null ✕
    multiple = true
    [option]
    [  1  •]
    [  2   ]
    [  3  •]

Идея в том, чтобы (снова) у меня была кнопка с переключателем логической переменной, чтобы множественный атрибут переключался при выборе. Я был основан на этих ответах для составления директивы, так как люди предполагают, что это лучший подход, так почему бы и нет ?!

Я ссылался на эти сообщения:
- Файл условного множественного ввода с AngularJS
- Условная директива множественного выбора в AngularJS
- Условно добавить множественный атрибут в UI. Select

Основная проблема в том, что мой ngModel хорошо работает, когда выбор не multiple, но когда он переключен, и я выбираю более одного элемента, он становится null.

Есть ли подход, который вы поддержали в этом глупом простом вопросе, или я должен пойти на подход ngIf и сохранить мир со своим здравомыслием?

app.js: Контроллер 

module.controller("myController", function($scope) {
    $scope.options  = [1, 2, 3, 4, 5, 6];
    $scope.selected = [];
    $scope.multiple = false;

    $scope.print = function() {
        console.log({ seleccion: $scope.selected, multiple: $scope.multiple});
    };

    $scope.toggleMultiple = function() {
        $scope.multiple = !$scope.multiple;
    }

    $scope.onChange = function(item) {
        console.log(item)
        $scope.print();
    }
});

app.js: Директива 

module.directive('ngMultiple', function () {
    return {
        restrict: 'A',
        scope: {
            ngMultiple: '='
        },
        link: function (scope, element, attr) {
            var unwatch = scope.$watch('ngMultiple', function (newValue) {
                if (newValue) {
                    element.attr('multiple', 'multiple');
                } else {
                    element.removeAttr('multiple');
                }
            });
        }
    };
});

index.html 

<div ng-app="myModule">
  <div ng-controller="myController">
    {{message}} <br />
    <select name="blabla" 

    ng-model="selected" id="blabla" 
    ng-multiple="multiple" 
    ng-options="o as o for o in options"
    ng-change="onChange(selected)">
    </select>
    <p>{{selectModel.selection}}</p>

    <p><button ng-click="print()">Print()</button></p>
    <p><button ng-click="toggleMultiple()">Toggle Multiple</button></p>
  </div>
</div>
...