双向数据绑定在为选择二AngularJS不起作用 [英] Two way databinding in Select2 for AngularJS doesn't work

问题描述

我有在AngularJS使用选择二插件的问题。我可以加载的项目精细化，检索我的NG-模型所选的项目，但我有问题，如果我更新NG-模式下拉不会被更新。

I am having issues with using the Select2 plugin in AngularJS. I can load the items fine, and retrieve the selected item from my ng-model, but I have issues, that the dropdown isn't updated if I update the ng-model.

在我看来，code是这样的：

In my view the code looks like this:

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

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

In my controller I have the following code, which retrieves the items and binds it to the list:

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

正如你可以看到我只是尝试设置DropDownList的第3项，但没有产品preselected。有没有解决$ P $另一种方式pselecting下拉项目？

As you can see I just try to set the 3rd item on the dropdownlist, but no item is preselected. Is there another way around preselecting a dropdown item?

推荐答案

<一个href=\"https://github.com/angular-ui/ui-select2#working-with-dynamic-options\">Angular-ui/ui-select2 GitHub的页面状态：

Angular-ui/ui-select2 github page states:

UI-SELECT2与＆LT不相适应;选择NG-选项＆gt; 。为了获得最佳的
  结果使用＆LT;选项NG重复方式＆gt; 而不是

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

所以，为了保存自己头痛我也推荐使用带有NG-重复选项为：

So, to save yourself from headache I also recommend using options with ng-repeat as in:

$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

这篇关于双向数据绑定在为选择二AngularJS不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！