设置 Angular-UI Select2 多个指令的初始值

Posted 2023-03-06

【中文标题】设置 Angular-UI Select2 多个指令的初始值

【英文标题】：Setting initial values of Angular-UI Select2 multiple directive

【发布时间】：2013-02-05 18:41:12

【问题描述】：

我有一个 select2 指令，用于多个国家/地区，并带有自定义查询来获取数据：

// Directive
<input ng-model="filters.countries" ui-select2="filters.countryOptions"
    data-placeholder="Choose a country...">

// filters.countryOptions
 
    multiple: true,
    query: function()  
        get_list_of_countries(); 
    


// Formatted data from remote source
[
    id: 'US', text: 'United States',
    id: 'CA', text: 'Canada' ...
]

我正在尝试使用以下方法在我的控制器中设置最初选择的值：

$scope.filters.countries = [id: 'US', text: 'United States'];

这确实正确设置了模型，但是这是在 select2 初始化发生之前发生的。当我逐步完成剩余的初始化代码时，输​​入会暂时显示[Object]，然后最终将$scope.filters.countries 和输入消隐，但它不会在输入中显示占位符文本。

为了解决这个问题，我使用以下方法来重置模型的初始值：

$scope.$on('$viewContentLoaded', function() 
    setTimeout(function() 
        $scope.filters.countries = [id: 'US', text: 'United States'];
    , 100);
);

使用setTimeout 似乎真的很骇人听闻。我错过了更好的方法吗？

更新 1

根据 ProLoser 的要求，这里有一个演示和 github 票。

演示：http://plnkr.co/edit/DgpGyegQxVm7zH1dZIJZ?p=preview

GitHub 问题：https://github.com/angular-ui/angular-ui/issues/455

按照 ProLoser 的建议，我开始使用 select2 的 initSelection 函数：

initSelection : function (element, callback) 
  callback($(element).data('$ngModelController').$modelValue);
,

它可以解决问题，但仍然感觉像是一种解决方法。

【问题讨论】：

你能为此创建一个演示并开一张票吗？如果你在 select2 中使用了initSelection（这是专门为它设计的），你可以只做$scope.filters.countries = 'US'，但整个初始化代码需要一些更彻底的测试，所以我们应该确保你所做的也得到支持。找不到对所选对象的匹配引用可能是个问题

我在上面编辑了我的问题。感谢您的帮助！

plnkr 甚至不起作用。我讨厌那个

您可以考虑按照 ProLoser 的建议创建一个可接受的答案。

如果“更新 1”解决了问题，请将其转换为答案并接受。

【参考方案1】：

根据 ProLoser 的要求，这里有一个演示和 github 票。

演示：http://plnkr.co/edit/DgpGyegQxVm7zH1dZIJZ?p=preview

GitHub 问题：https://github.com/angular-ui/angular-ui/issues/455

按照 ProLoser 的建议，我开始使用 select2 的 initSelection 函数：

initSelection : function (element, callback) 
  callback($(element).data('$ngModelController').$modelValue);
,

它可以解决问题，但仍然感觉像是一种解决方法。

【参考方案2】：

您是否尝试过将选项初始化为：

<option selected value="0">Name</option>