Select2 for AngularJS中的双向数据绑定不起作用

Question

我在使用AngularJS中的Select2插件时遇到问题.我可以加载项目,并从我的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();
            }
        });
    }

如您所见,我只是尝试在下拉列表中设置第3项,但没有预先选择项目.还有另一种预选下拉项目的方法吗？

Answer 1

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

ui-select2与...不兼容<select ng-options>.为了获得最佳效果,请使用<option ng-repeat>.

因此,为了避免头痛,我还建议使用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