Question

我在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>

我有价值

console.log($scope.standardValue);

结果：[＆＃34; lazzania＆＃34;，＆＃34; pizza＆＃34;，＆＃34; kebab＆＃34;]

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

已编辑： 我刚刚使用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>

还有我的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);
            }
        });

尽管如此，我仍然无法设置默认值。

Answer 1

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

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

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

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

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

Answer 2

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

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

然后allPossibleTags需要看起来像：

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

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

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

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

2 个答案: