AngularJS + select2 - How to set initial value

问题

I want to use Select2 in my AngularJS project, So I added an input like this :

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

Luckily , Whenever regionIdentifier is change, I find out. Actually I want to set initial value in my Select2. Here is my javascript code :

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

My $scope.regions looks like :

[object,object,object]

Each object is like :

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

How to init value in my select2?

回答1:

You should create a directive to make this work globally and fine. Here is a simple example which let you initialize a select2 set the default option values to your selection. You can find a working version on plnkr. While select2 depends on jQuery you may will look for an other lib to make it work. Some dev's preffer to have no jQuery included in AngularJS projects.

Controller

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

View

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

Directive

/**
 * 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");
            });
        }
    };
}]);

Directive template `views/directive/select2.html`

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

来源：https://stackoverflow.com/questions/40328631/angularjs-select2-how-to-set-initial-value

标签

javascript

html

angularjs

select2