Angular UI select2 指令 - 以编程方式更新模型未反映在小部件上

Posted 2023-02-19

【中文标题】Angular UI select2 指令 - 以编程方式更新模型未反映在小部件上

【英文标题】：Angular UI select2 directive - updating the model programmatically not reflected on the widget

【发布时间】：2013-03-24 12:21:04

【问题描述】：

我正在尝试以编程方式更新 select2 模型并刷新视图，但它似乎不起作用。

这是一个来自 Angular UI 项目的示例 plunker：http://plnkr.co/edit/kQROgr?p=preview

我尝试根据 select2 文档（http://ivaynberg.github.com/select2/“对外部值更改做出反应”）添加 initSelection()，但这不起作用。我也尝试过 select2 3.3.2 也没有解决。

有两个问题： 1）单击“更新模型”，模型更新，但它没有向 select2 小部件添加标签。还 2) 点击“Update-Model”，然后用select2选择第二个标签，“Update-Model”添加的第一个标签就消失了。

【问题讨论】：

这可能有帮助吗？ github.com/angular-ui/angular-ui/issues/455

你能做到吗？我遇到了同样的问题。

啊，我给了它旧的大学尝试......我知道它可以用于记录，因为我在我正在创建的应用程序中使用它并且我一直将外部数据推送到模态并且它更新了 select2，所以我确定这里还有其他东西在起作用......

@jonathan，我也有同样的问题。您的场景和我的场景之间的共同点是源列表似乎正在发生变化。在您的情况下，它会更改“选项”中指定的“查询”方法。就我而言，我使用“|”应用了一系列 angularjs 过滤器在'ng-repeat'中。我认为这是必须失败的对象引用比较。如果您对此有任何更新，请在此处发布。

嘿乔纳森，你能提供一个小提琴吗？

【参考方案1】：

我知道这个问题有点老了，但是嘿……我找到了，但不知道答案。

我设法通过设置模型然后在 select2Options 配置中调用 initSelection() 来完成我想要的操作

所以我的配置是这样的：

$scope.select2Options = 
allowClear: true
minimumInputLength: 3
quietMillis: 1000
initSelection: ->
  $scope.property
query: (query)->
  Properties.query(q: query.term, (response)->
    data = results: processData(response['properties'])
    query.callback(data)
    )

  processData = (data)->
    results = []
    angular.forEach(data, (item, index)->
      results.push(item)
      )
    return results

然后我让我的模态返回新创建的对象，如下所示：

modalInstance.result.then((result)->
    $scope.property = result
    $scope.select2Options.initSelection()
  )

基本上，一旦它更新了模型，我就必须手动重新初始化 select2 小部件。我认为这可以通过 $scope.$watch 来处理，如果你真的想要的话，但这可能是一种浪费，除非你从几个地方或其他地方更新了属性。