Angular - 如何在select2上初始化默认值

I use select2 in my Angular project , Actually I have a problem that is I have no idea about how to set default value for select-option. Here is my code :

我在我的Angular项目中使用select2,实际上我遇到了一个问题,我不知道如何为select-option设置默认值。这是我的代码:

HTML :

<select-tag-manager parent-id="2" value="restaurant.type" ></select-tag-manager>

Angular :

app.directive('selectTagManager', function() {
    return {
        restrict: "E",
        replace: true,
        scope: {
            parentId: '@',
            value: '='
        },
        controller: function($rootScope, $scope, Gateway, toaster, $element,  Tags) {
            var element;

            $scope.update = function () {

            };

            var makeStandardValue = function(value) {
                var result = [];
                angular.forEach(value , function(tag , key) {
                    if(result.indexOf(tag.tagId) < 0) {
                        result.push(tag.tagId);
                    }
                });
                return result;


            };

            var init = function () {

                Gateway.get('', '/tag?' + 'parentId=' + $scope.parentId, function(response) {
                    $scope.allPossibleTags = response.data.result.tags;
                });

                element = $($element).children().find('select').select2();
                console.log(element);

            };

            $scope.$watch('value', function(newval) {
                if( newval ) {
                    $scope.standardValue = [];

                    angular.forEach(newval, function(val, key) {

                        $scope.standardValue.push(val.tagName);

                    });
                    console.log($scope.standardValue);
                }
            });



            init();
        },
        templateUrl: 'selectTagManager.html'
    }
});

selectTagManager.html:

    <div class="row">
        <div class="col-md-12">
            {{ standardValue }}
            <select class="select2" multiple="multiple" ng-model="standardValue" ng-change="update()">
                <option ng-if="tag.tagId" ng-repeat="tag in allPossibleTags" data-id="{{tag.tagId}}" value="{{tag.tagId}}">{{ tag.tagName }}</option>
            </select>
        </div>
    </div>

I got value

我有价值

console.log($scope.standardValue);

result: ["lazzania", "pizza", "kebab"]

结果:[“lazzania”,“披萨”,“烤肉串”]

But I don't know how to set them as default value in select-option. Any suggestion?

但我不知道如何在select-option中将它们设置为默认值。有什么建议吗?

EDITED : I've just edited my question using Angular-ui/ui-select2. I changed my template :

编辑:我刚刚使用Angular-ui / ui-select2编辑了我的问题。我改变了我的模板:

    <select ui-select2 = "{ allowClear : true }" ng-model="standardValue" multiple="multiple" >
        <option value="standardId" ></option>
        <option ng-repeat="tag in allPossibleTags" value="{{tag.tagId}}">{{tag.tagName}}</option>
    </select>

And also my js:

还有我的js:

        $scope.$watch('value', function(newval) {
            if( newval ) {
                $scope.standardValue = [];
                $scope.standardId = [];
                // $scope.standardValue = makeStandardValue(newval);
                console.log('----------------------------------------------------------------------');

                angular.forEach(newval, function(val, key) {

                    $scope.standardValue.push(val.tagName);
                    $scope.standardId.push(val.tagId);

                });
                console.log($scope.standardValue);
                console.log($scope.standardId);
            }
        });

Nevertheless , Still I can't set default value.

不过,我仍然无法设置默认值。

2 个解决方案

#1

as demonstarted at http://select2.github.io/examples.html#programmatic, one can set default values for multiple select2 element as follows:

如http://select2.github.io/examples.html#programmatic所示,可以为多个select2元素设置默认值,如下所示:

$exampleMulti.val(["CA", "AL"]).trigger("change");

so, in you case you have already element variable pointing to your select2:

所以,在你的情况下,你已经有一个指向你的select2的元素变量:

element.val($scope.standardValue).trigger('change');

note, that this is jQuery approach of setting/changing values, angular approach would be to update values via ng model and its life cycle events

请注意,这是设置/更改值的jQuery方法,角度方法将通过ng模型及其生命周期事件更新值

#2

The IDs in your model need to match the IDs in your data source, so if your model is:

模型中的ID需要与数据源中的ID匹配,因此,如果您的模型是:

 ["lazzania", "pizza", "kebab"]

Then allPossibleTags needs to look like:

然后allPossibleTags需要看起来像:

[{ tagId: "lazzania", tagName: "Lazzania" }, { tagId: "pizza" ...

Check out this plunk for a working example:

查看此插件以获取一个工作示例:

http://plnkr.co/edit/e4kJgrc69u6d3y2CbECp?p=preview

#1