ng-repeat与ng-selected

Posted 2021-04-14

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

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

为什么？我在这里也有更复杂的例子：http://jsfiddle.net/ej5fx3kr/14/有效，虽然我不确定有什么区别，或者这里使用的模型是什么（注意：将模型名称从“程序”改为任何东西，它仍然有效..所以不确定目的是什么。

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

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

谢谢！

答案

处理此问题的“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-selected = true中使用ng-repeat可以解决这个问题。但是请确保你在ng-repeat中调用的数据。为了进行额外的调试和逐行实验，请使用chrome调试器.go来源选项卡并在需要调试的js行上设置断点。这样可以逐行调试暂停和玩耍。希望这会有所帮助。谢谢