Angular-UI select2动态更改选项中的标签属性

Question

Official example for Angular-ui select2 tags is:

myAppModule.controller('MyController', function($scope) {
    $scope.list_of_string = ['tag1', 'tag2']
    $scope.select2Options = {
        'multiple': true,
        'simple_tags': true,
        'tags': ['tag1', 'tag2', 'tag3', 'tag4']  // Can be empty list.
    };
});

And I have this piece of code:

$scope.select2Options = {
                        'multiple': true,
                        'simple_tags': true,
                        'tags': $scope.categoryNames
                    };

$scope.$watch(function () { return adminCrudService.getCategoriesForUpdate(); }, function () {
                $scope.action = "edit";
                $scope.categoriesForUpdate = adminCrudService.getCategoriesForUpdate();
                if ($scope.categoriesForUpdate.length > null) {
                    $scope.categoryNames = [];
                    _.forEach($scope.categoriesForUpdate, function (item) {
                        $scope.categoryNames.push(item._backingStore.Name);
                    });

                }
            });

But this just doesn't work, when I click on Selcet2, I get No matches found and I've logged $scope.categoryNames inside $watch, and data is there (so that part works fine).

So my question is can tags be loaded dynamically, and if they can, how ?

Answer 1

I've recently encountered this issue when using the AngularUI Select2 project, and solved it by making the tags argument a function that returns the model. For example:

$scope.select2Options = {
  multiple: true,
  simple_tags: true,
  tags: function () {
    return $scope.categoryNames;
  }
};

Any updates to the $scope.categoryNames is reflected in the view because Select2 calls the tags function when opened and on every key press.

Hopefully this is useful for people wanting to use Select2 rather than Chosen.

Answer 2

好吧，我无法使它正常工作，所以我遵循这个很棒的教程： link ，选择使用Chosen，我很快就得到了想要的结果。