AngularJS + select2 - 如何设置初始值

Question

我想在我的 AngularJS 项目中使用Select2，所以我添加了这样的输入：

<select class="find-neighborhood js-states form-control" 
    ng-model="regionIdentifier" 
    ng-init="">
 </select>

幸运的是，每当regionIdentifier 发生变化时，我都会发现。实际上我想在我的Select2 中设置初始值。这是我的 javascript 代码：

$(".find-neighborhood").select2({
    dir: "rtl",
    placeholder: "find neighborhood ...",
    allowClear: true,
    data: $scope.regions
 }); 

我的$scope.regions 看起来像：

[object,object,object]

每个对象都像：

0 :Object
 id:52623
 regionSlug:yvuj
 text:yvuj1

如何在我的select2 中初始化值？

Answer 1

您应该创建一个指令以使其在全局范围内正常工作。这是一个简单的示例，可让您初始化 select2 为您的选择设置默认选项值。您可以在 plnkr 上找到工作版本。虽然 select2 依赖于 jQuery，但您可能会寻找其他库来使其工作。一些开发者更喜欢在 AngularJS 项目中不包含 jQuery。

控制器

//option list 
$scope.regions = {
    'test1' : {
        id: 1
    },
    'test2' : {
        id: 2
    },
    'test3' : {
        id: 3
    },
    'test4' : {
        id: 4
    },
    'test5' : {
        id: 5
    }
};

//model & selected value setup
$scope.regionIdentifier = 3;

查看

<select class="js-example-basic-single"
        ng-model="regionIdentifier"
        items="regions"
        items-selected="regionIdentifier"
        id="regionSelection"
        select-two>
</select>

指令

/**
 * Simple select2 directive
 */
angular.module('app').directive('selectTwo', ['$timeout', function($timeout){

    return {
        restrict : 'EA',
        transclude : true,
        terminal: true,
        templateUrl : 'views/directive/select2.html',
        scope: {
            items: "=",
            itemsSelected: "="
        },
        link: function($scope, $element, $attrs, $controller){

            //format options https://select2.github.io/select2/#documentation
            function format(state) {

                //init default state
                var optionTemplate = state.text;
                if (!state.id || state.id == 0) { //option group or no selection item
                    return optionTemplate;
                }

                return optionTemplate;
            }

            //init on load
            $timeout(function(){

                //if multiple options are possible, parse an comma seperated list into itemsSelected like 1,2,5,23,21
                if (angular.isString($scope.itemsSelected) && $scope.itemsSelected.split(',').length > 1) {
                    $scope.itemsSelected = $scope.itemsSelected.split(',');
                }

                $($element[0]).select2({
                    formatResult: format,
                    formatSelection: format,
                    escapeMarkup: function(m) { return m; }
                }).val($scope.itemsSelected == undefined ? [0]: [$scope.itemsSelected]).trigger("change");
            });
        }
    };
}]);

指令模板views/directive/select2.html

<option ng-repeat="(name, item) in items track by $index"
    value="{{ item.id }}">
    {{ name }}
</option>