angular-ui select2 tagging - preselected tags id/text
Question
This is my tags input
<input type="hidden" ng-model="tags" class="input-large" ui-select2="{ tags: [{ id:5, text: 'tag1' }, { id: 8, text: 'tag2' }] }" />
now how do I make, say tag with id 5, preselected on load?
If I do $scope.tags = [5]; or even $scope.tags = 5 it makes a new tag with id 5 and text 5(though it removes from options).. I obviously want it to say "tag1", not 5, but still maintain the ID in the model..
2 answers
solution1
0 2013-03-28 02:28:52
What you demonstrated:
HTML
<p>
<input type="text" ng-model="tags"
ui-select2="{tags: [{id:4, text:'red'},{id:2, text:'blue'},{id:8, text:'white'},{id:41, text:'green'},{id:13, text:'yellow'}]}" />
</p>
Angular-UI
angular.module('app').controller('MainCtrl', function($scope) {
$scope.message = "Will load shortly...";
$scope.tags = [8, 2];
$scope.message = 'Loaded';
});
http://plnkr.co/edit/wUQq8P?p=preview
Why did it work then? I'm not sure. Perhaps there was a type or something did not load correctly. I've never used Angular or Select2, so it took me a few tries to get this to work.
Hmm. Well, copying your code into the plunk as-is, no other changes, I get:
So I am guessing the problem I'm either not understanding or it was somewhere else in your code.
This is was the originally working example, using a method which can easily be paired with AJAX:
HTML
<body ng-controller="MainCtrl">
<h4>{{message}}</h4>
<p>
<input type="text" ui-select2="options" ng-model="tags" />
</p>
</body>
Angular-UI
angular.module('app').controller('MainCtrl', function($scope) {
$scope.message = "Will load shortly...";
$scope.options = {
tags: [
{id:4, text:'red'},
{id:2, text:'blue'},
{id:8, text:'white'},
{id:41, text:'green'},
{id:13, text:'yellow'}
]
};
$scope.tags = [8, 2];
$scope.message = 'Loaded';
});
solution2
0 ACCPTED 2013-03-28 07:56:48
So the problem was actually with the version of select2 used. I was using 3.3.1, where it doesn't work, see http://plnkr.co/edit/Z53wvGKT1if1iZAVierY?p=preview
It works as expected when I use 3.3.2.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.