Question

在我的角度应用程序中，我有一个bootstrap多选。当我不提供ng-model属性时，它按预期工作。

<select name="sample" class="form-control" multiple>
     <option 
            ng-repeat="item in vm.items" 
            value="{{item.id}}" 
            selected>
            {{item.name}} 
     </option>
</select>

这将选择所有可用选项。

但是我提供了ng-model，只选择了最后一个值。

<select name="sample" class="form-control" multiple ng-model="someModel">
     <option 
            ng-repeat="item in vm.items" 
            value="{{item.id}}" 
            selected>
            {{item.name}} 
     </option>
</select>

我在这里错过了什么吗？

Answer 1

您不应使用ngRepeat手动渲染选项。为此使用ngOptions指令：

<select name="sample" class="form-control" multiple 
    ng-options="item.id as item.name for item in vm.items"
    ng-model="vm.someModel">
</select>

现在，为了选择所有选项，您需要使用相应的ID填充vm.someModel。所以在控制器中你可以做到：

this.someModel = this.items.map(function(item) {
    return item.id;
});

查看下面的演示。

＆＃13;

angular.module('demo', []).controller('MainCtrl', function($scope) {
    this.items = [{name:'One', id:1}, {name: 'Two', id: 2}, {name: 'Three', id:3}];
    this.someModel = this.items.map(function(item) {
        return item.id;
    });
});

＆＃13;

<script src="https://code.angularjs.org/1.4.8/angular.js"></script>


<div ng-app="demo" ng-controller="MainCtrl as vm">
    <select name="sample" class="form-control" multiple 
        ng-options="item.id as item.name for item in vm.items"
        ng-model="vm.someModel">
    </select>   
    
    {{ vm.someModel }} 
</div>

＆＃13;

Angular中的ng-model引导多次选择不起作用

1 个答案: