javascript - Select2 for AngularJS 中的两种数据绑定(bind)不起作用

Question

我在使用 AngularJS 中的 Select2 插件时遇到问题。我可以很好地加载项目，并从我的 ng-model 中检索选定的项目，但我有问题，如果我更新 ng-model，下拉列表不会更新。

在我看来，代码如下所示:

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

在我的 Controller 中，我有以下代码，它检索项目并将其绑定(bind)到列表:

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

如您所见，我只是尝试在下拉列表中设置第 3 个项目，但没有预选任何项目。有没有其他方法可以预选下拉项？

Answer 1

Angular-ui/ui-select2 github 页面状态:

ui-select2 is incompatible with <select ng-options>. For the best results use <option ng-repeat> instead.

所以，为了避免让自己头疼，我还建议使用带有 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