Question

我的情况是我想使用Select2小部件的createSearchChoice功能。所以我发现我需要使用html输入元素而不是select元素，所以我不能使用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。

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

3 个答案: