Question

我试图弄清楚如何使用ng-repeat生成选项元素列表，但其中一个要在加载时标记为选定的选项。

在谷歌搜索之后，我找到了这个基础，我通过将所选属性添加到数据对象来修改 https://plnkr.co/edit/7g4MeAQnG4PzpnrebBGc?p=preview 但是，似乎ng-selected="option.selected == true"没有效果:(

为什么呢？我在这里也有更复杂的例子：http://jsfiddle.net/ej5fx3kr/14/有效，虽然我不确定有什么区别，或者这里使用的模型是什么（注意：改变模型名称来自＆＃34; program＆＃34 ;对于任何事情，它仍然有效...所以不确定目的是什么。）

加分点：如何在指令中调试AngularJS中的代码？就像在调试模式中逐行实验一样，实际看到该特定范围内的变量值是什么，可以使用什么等等......

我在这个问题中的最终目标是在控制器的页面加载中通过ajax加载值列表，如果URL中有routeParam，在加载的值列表中找到它，并添加所选属性，然后设置在页面加载时生成的HTML中，selected = true，否则不会在页面加载的填充选择框中预先选择任何内容，所以这就是为什么在尝试插入之前在最简单的示例中理解这一点很重要。< / p>

谢谢！

Answer 1

在ng-selected = true内使用ng-repeat可解决此问题。但请确保您在ng-repeat中调用的数据。对于其他调试和逐行实验，请使用chrome调试器.go来源选项卡并设置需要调试的js行上的断点。这样可以让您通过暂停和播放逐行调试。希望这会有所帮助。谢谢

Answer 2

处理此问题的“Angular Way”是使用ng-options而不是ng-repeat，然后只需将模型设置为控制器加载时的默认值。

例如：

<select ng-options="option.name for option in data.availableOptions" 
        ng-model="selectedItem"></select>

$scope.selectedItem=$scope.data.availableOptions[2];

对于更高级的情况，您的ng-model可能不是数组中的对象，而是单个属性，您可以使用ng-options的修改版本：

<select ng-options="option.id as option.name for option in data.availableOptions" 
        ng-model="selectedId"></select>

$scope.selectedId = '2';

以下是您的plunker的修改版本，显示了这些不同的可能性：https://plnkr.co/edit/xzYmXf8C3WuZaelwj5hO?p=preview

ng-repeat with ng-selected

2 个答案: