Angular中如何设置多选下拉选择框的默认选中项

我来帮你搞定这个多选下拉框默认选中的问题！先看你现有代码里的几个小问题，再给你修正后的方案：

问题分析 #

1. ng-model类型错误：多选下拉框的ng-model必须绑定数组（因为要存储多个选中值），你需要确保store.category在控制器里被初始化为数组类型。
2. ng-selected条件错误：indexOf找不到匹配元素时返回-1，你写的!==1完全不对，正确判断应该是preData.category.indexOf(categorie.id) !== -1。
3. ng-value语法冗余：ng-value不需要加插值{{}}，直接写变量名即可。

修正后的HTML代码 #

<div class="form-group">
  <label for="category">Category</label>
  <select 
    data-placeholder="Choose a Category..." 
    ng-model="store.category" 
    class="standardSelect chosen-select" 
    id="select2-js-example-basic-hide-search-container" 
    multiple=""
  >
    <option 
      ng-repeat="categorie in categories" 
      ng-value="categorie.id"
    >
      {{ categorie.category_name }}
    </option>
  </select>
</div>

更简洁的控制器处理（推荐） #

其实Angular的双向绑定已经帮我们处理了多选选中逻辑，不需要手动写ng-selected！只要在控制器里把默认选中的ID数组直接赋值给store.category就行：

// 假设preData.category是后台返回的默认选中ID数组，比如[2,4]
$scope.store.category = angular.copy($scope.preData.category);

这样Angular会自动匹配ng-value和ng-model数组里的值，自动选中对应的选项，比手动写ng-selected更符合Angular的最佳实践。

补充说明 #

如果你用的是chosen-select这类第三方插件，记得在数据赋值完成后触发插件的更新，比如：

// 赋值后更新chosen插件
$("#select2-js-example-basic-hide-search-container").trigger("chosen:updated");

内容的提问来源于stack exchange，提问作者yagnik devani