Select2 for AngularJS 中的两种方式数据绑定不起作用

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

在我的控制器中，我有以下代码，它检索项目并将其绑定到列表：

$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-select2github页面状态：

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

Answer 2

Stewie 发布了实现 Select2 的正确方法，但他使用的是“静态”元素。

不同之处在于 Angular 在通过 ajax 调用元素之前渲染 select2，因此在这种情况下，您需要添加 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>

如果它不起作用，请创建一个加载 ajax 项目的 jsfiddle，我会在那里工作！