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

【问题标题】：Angular - how to initialize default value on select2Angular - 如何在select2上初始化默认值
【发布时间】：2016-09-10 13:32:02
【问题描述】：

我在我的 Angular 项目中使用 select2，实际上我有一个问题是我不知道如何为选择选项设置默认值。这是我的代码：

HTML：

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

角度：

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

结果：["lazzania", "pizza", "kebab"]

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

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

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

【问题讨论】：

allPossibleTags 长什么样子？
@spongesuck 是包含 tagId , tagName 的对象。
你应该尝试迁移到ui-select，因为 ui-select2 已被弃用。

标签： javascript angularjs select2 angularjs-select2

【解决方案1】：

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

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

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

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

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

【讨论】：

我使用 element.val($scope.standardValue).trigger('change');我收到一个错误：错误：$rootScope:inprog Action Already In Progress

【解决方案2】：

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

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

那么allPossibleTags 需要看起来像：

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

查看这个 plunk 以获得一个工作示例：

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

【讨论】：