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

Question

我的情况是我想使用 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，所以我希望不要走那条路，也就是说我走那条路淹死了。如果有人可以帮忙，那就太好了。

Answer 1

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

Answer 2

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

Answer 3

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

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