在Angular中使用ng-model引导多项选择不起作用答案

【问题标题】：Bootstrap multiple select with ng-model in Angular not working在Angular中使用ng-model引导多项选择不起作用
【发布时间】：2015-12-09 15:36:59
【问题描述】：

在我的 Angular 应用程序中，我有一个引导多选。当我不提供 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>

我错过了什么吗？

【问题讨论】：

而模型 someModel 的价值是什么？
空对象 {} 中的空？或未分配/未定义
使用 ng-options 代替 ng-repeat

标签： angularjs twitter-bootstrap

【解决方案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;
});

查看下面的演示。

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;
    });
});

<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>

【讨论】：