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

Posted 2023-05-07

【中文标题】Select2 for AngularJS 中的两种方式数据绑定不起作用

【英文标题】：Two way databinding in Select2 for AngularJS doesn't work

【发布时间】：2013-06-12 19:37:06

【问题描述】：

我在使用 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();
            
        );
    

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

【问题讨论】：

请不要建议使用点表示法，因此请将您的数据保存在单个变量中，例如。 data。有关详细信息，请参阅 Egghead.io 视频教程：goo.gl/373Ia

【参考方案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

【讨论】：

我的错误有两个。我使用了 ng-options 并将 $scope.chosenFilterItem 设置为一个项目，插入一个项目。

【参考方案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，我会在那里工作！

【讨论】：

实际上，this demo 证明 select2 也会提取延迟元素。

我认为 Dofs 在 select2 指令中需要一个初始预选元素。它可以工作，但“效果”将是一个初始的空值，并且在 ajax 完成后它会出现正确的值。使用 ui-if 只需隐藏初始的空值。

当然，但他的问题不在于在加载数据之前隐藏元素。