Angular-UI select2 dynamically change tags attribute in options

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 ?

cgwyllie · Accepted Answer · 2013-11-07 12:05:32Z

9

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.

answered Nov 7, 2013 at 12:05

cgwyllie

4133 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hyperN · Accepted Answer · 2013-08-15 21:48:36Z

0

Well, I couldn't get it to work, so I've deiced to use Chosen instead, following this great tutorial: link and I got result I wanted in no-time.

answered Aug 15, 2013 at 21:48

hyperN

2,75410 gold badges58 silver badges96 bronze badges

Collectives™ on Stack Overflow

Angular-UI select2 dynamically change tags attribute in options

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related