如何使用 angularjs 动态填充 select2 数据答案

【问题标题】：How can I fill select2 data dynamically using angularjs如何使用 angularjs 动态填充 select2 数据
【发布时间】：2013-02-05 22:08:01
【问题描述】：

我的情况是我想使用 Select2 小部件的 createSearchChoice 功能。所以我发现我需要使用 html 输入元素而不是选择元素，所以我不能使用 ng-repeat 来填充 select2 小部件。我发现有一个“数据”选项，并且能够使用静态数据填充 select2 小部件，但当我尝试动态填充它时却不行。

什么有效：

html: <input class='select2' ui-select2='sel2props' type='hidden'>

在控制器中：

$scope.sel2props = {
    createSearchChoice: ...

  data: [ 
    { id: 0, text: 'yabba' }
    etc
  ]
};

但是，如果我尝试将数据设置为一个变量，然后我可以将其设置为数据库提供给我的任何内容，则不会填充小部件。

data: $scope.data;

function to retrieve data {
    $scope.data = retrieved data;
}

检索到的数据完全按照指定的方式。

如果我设置一个按钮来附加数据键，它将起作用：

$scope.appenddata = function () {
  $scope.data.push({id:1, text: 'anot'});
};

所以我认为这是一个时间问题，我尝试了 $digest 和 $apply 但它们在控制器中不起作用。我试图设置一个指令，实际上可以做简单的小部件，但不能做 select2，所以我希望不要走那条路，也就是说我走那条路淹死了。如果有人能帮忙，那就太好了。

【问题讨论】：

“我尝试了 $digest 和 $apply 但它们在控制器中不起作用”是什么意思？他们在任何可以访问范围的地方工作。你是这样运行的吗$scope.$apply()？
@bmleite。不正确。你会得到一个错误：$apply 已经在控制器中进行了。
那是因为你在错误的地方打电话给$apply。它与控制器无关。如果您想要一种避免错误的简单方法，请将控制器内对$scope.$apply() 的所有调用替换为$scope.$$phase || $scope.$apply()。请注意，这不会解决您的问题，它只会避免错误。请提供一个 jsfiddle 来解决您的问题。

标签： angularjs jquery-select2

【解决方案1】：

解决方案很简单。只需将元素推送到 select2 数据数组，而不是引用另一个数组。

【讨论】：

我对此也视而不见。阅读您的回答让我解放了思想； “是的，当然！”，为什么我要做 $scope.tags = [], 2 次...？

【解决方案2】：

function (result) {
  $scope.lookupOptions.data.length = 0; // remove old items
  angular.extend($scope.lookupOptions.data, result.data); // add new items                  
}

【讨论】：

【解决方案3】：

我最近使用的一个技巧是使用 Select2 的 query 选项按需传递您的最新数据。

我整理了一个示例，包含在自定义指令中。看到这个Plunk。

【讨论】：

谢谢，但我希望用户添加数据因此 createSearchChoice 选项和使用输入而不是选择。此外，您的指令没有很好地处理数据：它为每个选项都包含一个 html span 元素。
是否要将用户创建的数据发送回数据库？您对“多项”选择而不是下拉菜单感兴趣吗？我 am 使用 <input> 创建 select2 小部件； select2 在单选模式下会创建一个下拉菜单，但可以轻松更改。另外，你的意思是我没有“很好地处理数据”？ Select2 创建那些 HTML <span> 元素以显示下拉列表。我很乐意更新我的答案；当您从数据库中检索数据时，我只是在回答您将数据动态添加到 Select2 的直接问题。
当我第一次看到你的 plunk 时，span 显示在下拉列表中，但现在没有了。所以我不知道那是关于什么的。我的解决方案是将每个元素推送到数据数组而不是引用另一个数组。