ng-repeat with ng-selected

Question

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

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

为什么？我这里还有一个更复杂的例子：http://jsfiddle.net/ej5fx3kr/14/ 有效，虽然我不确定有什么区别，或者这里使用的模型是什么（注意：将模型名称从 "program" 更改为任何内容，它仍然有效......所以不确定目的是什么）。

奖励积分： 如何在指令中调试 AngularJS 中的代码？就像在调试模式下逐行实验以实际查看特定范围内的变量值是什么，可以使用什么等等...

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

谢谢！

Answer 1

在 ng-repeat 中使用 ng-selected = true 可以解决这个问题。但是请确保您在 ng-repeat 中调用的数据。要进行额外的调试和逐行实验，请使用 chrome 调试器。转到源选项卡并在您需要的 js 行上设置断点 debug.This 会让你通过暂停和播放逐行调试。希望这个helps.Thanks

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

ng-repeat with ng-selected

javascript

angularjs

angularjs-directive

angularjs-scope