Двухсторонняя привязка данных в Select2 для AngularJS не работает

Question

У меня возникли проблемы с использованием модуля Select2 в AngularJS. Я могу загрузить объекты в порядке и получить выбранный элемент из моей ng-модели, но у меня есть проблемы, что выпадающий список не обновляется, если я обновляю ng-модель.

На мой взгляд, код выглядит следующим образом:

<select ui-select2 data-placeholder="All" id="filtersSelect" ng-model="chosenFilterItem" ng-options="item.text for item in filterItems"> 

В мой контроллер у меня есть следующий код, который извлекает элементы и связывает его в список:

$scope.fetchFilters = function(){ 
     $http.get($scope.filtersUrl).then(function(result){ 
      $scope.filterItems = result.data; 
      $scope.chosenFilterItem = result.data[3]; 
      if(!$scope.$$phase) { 
       $scope.$apply(); 
      } 
     }); 
    } 

Как вы можете см. Я просто пытаюсь установить третий элемент в раскрывающемся списке, но ни один элемент не выбран. Есть ли другой способ выбора выделенного пункта?

Answer 1

Angular-ui/ui-select2 GitHub страницы гласит:

щ-Выбор2 несовместима с <select ng-options>. Для лучших результатов используют <option ng-repeat>.

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

$scope.filterItems = [ 
    {id: 1, text: 'Item1'}, 
    {id: 2, text: 'Item2'}, 
    {id: 3, text: 'Item3'}, 
    {id: 4, text: 'Item4'} 
]; 

<select ui-select2 placeholder="All" ng-model="chosenItem"> 
    <option value=""></option> 
    <option ng-repeat="item in filterItems" value="{{item.id}}">{{item.text}}</option> 
</select> 

DEMO PLUNKER

Answer 2

Стьюи разместил Rigth способ реализации ВЫБ.2, но он использует " статические "элементы.

Разница заключается в том, что угловой визуализирует select2 перед тем, как элементы, вызванные через ajax, поэтому в этом случае вам нужно добавить инструкцию ui-if, чтобы добавить директиву только после того, как у вас есть данные.

<select ui-select2 placeholder="All" ng-model="chosenFilterItem" **ui-if="filterItems.length>0"**> 
<option value=""></option> 
<option ng-repeat="item in filterItems" value="{{item.id}}">{{item.text}}</option> 
</select> 

Если он не работает, пожалуйста, создайте jsfiddle с Аяксом пунктов погрузки и я буду там работать!