Question

我正在维护一个网站，该网站允许用户创建各种配置文件，以便他们将活动广播到Feed。我实现了ng-grid来跟踪创建的所有配置文件，并创建了两个按钮，允许用户创建/编辑这些配置文件。我现在唯一的问题是，当用户在网格上选择一行并尝试编辑该特定行时，下拉菜单不会自动填充来自ngModel的数据。

这是我遇到问题的表格的一部分：

<select ng-model="source.canSendTo" ng-options="value.name for value in sourceCanSendTo" data-style="btn" bs-select></select>

在控制器中，我将sourceCanSendTo定义为：

$scope.sourceCanSendTo = [ {"id":"abc", "name": "ABC"}, {"id":bcd", "name": "BCD"} ... ];

在选择行时，我只设置source =所选项目，console.logs显示所有数据都在那里。表单的其他部分正在正确填充（主要是s），console.log（$ scope.source.canSendTo）显示原始数据在那里，它只是选择默认为空白。。我会如何尝试预先选择我目前拥有的下拉选项中的某些元素？

例如，如果个人资料中有＆＃39; abc＆＃39;＆＃39; bcd＆＃39;选中后，如何进行选择，以便在编辑该配置文件时，下拉框显示＆＃39; abc，bcd＆＃39;而不只是＆＃34;没有选择＆＃34;？

编辑：我之前回复了一条评论询问bs-select，说它只是控制了下拉框中的一些CSS元素 - 看起来这是完全不正确的快速谷歌搜索后，其他一切导致死胡同。有没有人知道如何使用数据正确初始化模型，以便在我预加载表单时，＆＃39;可以发送到＆＃39;下拉选择实际上已选择所选的选项，而不是说＆＃34;没有选择＆＃34;？提前感谢您的帮助！

Answer 1

当你将source.canSendTo绑定到sourceCanSendTo的名称（value.name）时，你只需要一个绑定已保存名称的结构，如下所示：

source.canSendTo = ['abc', 'bcd']; //And all the selected values

因此，您需要将source.canSendTo属性构造为此结构。

PS：如果您展示如何从服务器提供数据，我可以帮助您构建source.canSendTo属性。

Answer 2

$ scope.canSendTo必须使用对所选选项的引用进行初始化。

var initialSelection = 0;
$scope.source = { canSendTo : [ {"id":"abc", "name": "ABC"}, {"id":bcd", "name": "BCD"} ... ] };
$scope.canSendTo = $scope.source.canSendTo[initialSelection];

Answer 3

最后发现我的代码出了什么问题 - 似乎存储在模型中的数据与ngOptions中的数据不同，使用ngOptions进行了一些操作并设法获得了可行的功能。工作代码片段：

<select ng-model="sendTo.name" ng-option="value.name as value.name for value in sourceCanSendTo" data-style="btn" multiple bs-select>

（意识到用于ngModel的变量在命名约定方面相当模糊，改变了它）

使用数据初始化ngModel - AngularJS Bootstrap bs-select

3 个答案: