angularjs - 为什么在选择中切换'多个'属性时ngModel'null'？

Question

我正在为一个用例开发一个片段，但为了保持简单，我进行了基本的multiple切换练习。

问题是ngModel当 select 的多个属性由通过绑定切换属性的指令动态切换时为 null：

预期行为

                                  预期得到
    选择和选项：ngModel: [1] ✓ | ngModel: 1 ✓
    多个=假
    [选项]
    [ 1 •]
    [ 2 ]
    [ 3 ]
                                  预期得到
    选择和选项：ngModel: [1, 3] ✓ | ngModel：空✕
    多个=真
    [选项]
    [ 1 •]
    [ 2 ]
    [ 3 •]

这个想法很简单，（再次）我有一个按钮可以切换一个布尔变量，因此可以在选择中切换多个属性。我是根据这些答案来制定指令的，因为人们建议这是一种更好的方法，那为什么不呢？！

我引用了这些帖子：
-使用 AngularJS 的条件多输入文件
- AngularJS中的条件多选指令
-有条件地将多个属性添加到 UI Select

The main problem is that my ngModelworks well when the select is not multiple, but when it's switched, and I select more than one element, it becames 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');
                }
            });
        }
    };
});

索引.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>

标签： angularjsangularjs-directive