如何默认选中从JSON填充的Angular多选下拉框所有选项？

问题场景 #

使用AngularJS通过JSON数据填充多选下拉框，代码如下：

<select size="2" id="inst_all" style="width:200px;" multiple ng-multiple="true" ng-model="selectedCountries"
ng-options="sort.Institute as sort.Institute for sort in products | unique : 'Institute'">
</select>

尝试用jQuery直接设置选项选中状态，但未生效：

$('#inst_all option').prop('selected', true);

原因分析 #

AngularJS采用数据驱动视图的机制，视图状态由绑定的模型变量（此处为selectedCountries）控制。直接用jQuery操作DOM修改option的选中状态，AngularJS无法感知该变化，后续的digest循环可能会重置视图状态，导致设置失效。

解决方案 #

直接修改绑定的模型变量selectedCountries，将其设置为所有去重后的Institute值数组即可：

方法1：控制器中处理（推荐） #

利用AngularJS的unique过滤器提取去重后的机构列表，再映射出Institute字段值赋值给模型：

// 示例控制器代码
app.controller('YourController', function($scope, $filter) {
    // 你的JSON数据源
    $scope.products = [
        { Institute: "机构A" },
        { Institute: "机构B" },
        { Institute: "机构A" },
        { Institute: "机构C" }
    ];

    // 获取去重后的机构数组
    const uniqueInstitutes = $filter('unique')($scope.products, 'Institute');
    // 赋值给模型实现默认全选
    $scope.selectedCountries = uniqueInstitutes.map(item => item.Institute);
});

方法2：使用ng-init（适合简单场景） #

直接在模板中通过ng-init初始化模型值：

<select size="2" id="inst_all" style="width:200px;" multiple ng-multiple="true" 
        ng-model="selectedCountries"
        ng-options="sort.Institute as sort.Institute for sort in products | unique : 'Institute'"
        ng-init="selectedCountries = (products | unique : 'Institute').map(item => item.Institute)">
</select>

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