如何在AngularJS项目中结合$localStorage为select2设置默认值

• 异步时序问题：$http.get是异步请求，你执行默认值赋值代码时，请求还未返回，ng-repeat绑定的下拉选项还没有渲染到页面上，select2找不到对应value的选项，自然无法设置成功。你测试时固定写死option能生效，就是因为页面初始化时option已经存在。
• 混用jQuery dom操作和AngularJS数据绑定逻辑，容易出现数据不同步、生命周期不匹配的问题。

第一步：修改.aspx页面代码，给select添加AngularJS内置的ng-model绑定 #

<select class="form-control select" ng-model="selectedId">
    <option value="">---请选择---</option>
    <option ng-repeat="option in test" value="{{option.testid}}">{{option.testname}}</option>
</select>

<select class="form-control selectSec" name="secs[]" multiple="multiple" ng-model="selectedSecs">
    <option value="">---请选择---</option>
    <option ng-repeat="option in secs" value="{{option.secid}}">{{option.secname}}</option>
</select>

第二步：修改app.js控制器代码，把默认值赋值逻辑放到请求回调中 #

app.controller('AppCtrl', function ($scope, $http, $localStorage, $timeout) {
    // 初始化本地存储的值到scope变量
    $scope.selectedId = $localStorage.f.tab.idSelect || '';
    $scope.selectedSecs = $localStorage.f.tab.selectSecArray || [];

    $http.get("url1").then(function (response) {
        $scope.test = response.data.Liste;
        // $timeout不加延迟默认等待当前dom渲染周期结束，确保ng-repeat的option已经生成
        $timeout(function() {
            $('.select').val($scope.selectedId).trigger('change');
        })
    })

    $http.get("url2").then(function (response) {
        $scope.secs = response.data.Liste;
        $timeout(function() {
            $('.selectSec').val($scope.selectedSecs).trigger('change');
        })
    })

    // 用AngularJS的$watch监听值变化更新本地存储，替代jQuery的change事件绑定
    $scope.$watch('selectedId', function(newVal) {
        if (newVal === "") {
            console.log("null")
        } else {
            $localStorage.f.tab.idSelect = newVal;
        }
    })

    // 多选数组需要开启深度监听
    $scope.$watch('selectedSecs', function(newVal) {
        $localStorage.f.tab.selectSecArray = newVal;
    }, true)
})

如果是长期维护的AngularJS项目，建议把select2的初始化逻辑封装成自定义指令，不要在controller中直接操作dom，可避免内存泄漏、数据不同步等问题。

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