тегирование angular-ui select2 - предварительно выбранные идентификаторы тегов / текст

Это мой ввод тегов

<input type="hidden" ng-model="tags" class="input-large" ui-select2="{ tags: [{ id:5, text: 'tag1' }, { id: 8, text: 'tag2' }] }" />

Теперь, как мне сделать, скажем, тег с идентификатором 5 предварительно выбранным при загрузке?

Если я сделаю $scope.tags = [5]; или даже $scope.tags = 5 он создает новый тег с идентификатором 5 и текстом 5 (хотя он удаляется из параметров). Я, очевидно, хочу, чтобы он говорил «тег1», а не 5, но при этом сохранял идентификатор в модели. .


javascript angularjs jquery-select2 angular-ui
person fxck    schedule 27.03.2013    source источник
comment
Как это отображается? Скрытый ввод с классом input-large и объектом в директиве ui-select2?   -  person Galdo    schedule 28.03.2013
comment
да, так работает select2   -  person fxck    schedule 28.03.2013

Ответы (2)


arrow_upward
0
arrow_downward

Что вы продемонстрировали:

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.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

Почему тогда это сработало? Я не уверен. Возможно был тип или что-то не правильно загрузилось. Я никогда не использовал Angular или Select2, поэтому мне потребовалось несколько попыток, чтобы заставить это работать.

Хм. Что ж, скопировав ваш код в планк как есть, никаких других изменений, я получаю:

http://embed.plnkr.co/wUQq8P

Итак, я предполагаю, что проблема, которую я либо не понимаю, либо она была где-то еще в вашем коде.

Это был изначально рабочий пример, использующий метод, который можно легко совместить с AJAX:

HTML

<body ng-controller="MainCtrl">
  <h4>{{message}}</h4>
  <p>
    <input type="text" ui-select2="options" ng-model="tags" />
  </p>
</body>

Угловой интерфейс

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

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

person Jared Farrish    schedule 28.03.2013

arrow_upward
0
arrow_downward

Таким образом, проблема была на самом деле с используемой версией select2. Я использовал версию 3.3.1, где она не работает, см. http://plnkr.co/edit/Z53wvGKT1if1iZAVierY?p=preview

Он работает, как и ожидалось, когда я использую 3.3.2.

person fxck    schedule 28.03.2013