javascript - 使用 ng-repeat 以 Angular 将所选应用到最后一个选项

Question

如何将 selected 属性应用于 AngularJS 中使用 ng-repeat 插入的最后一个选项？我按如下方式插入 HTML:

<select class="form-control half" ng-model="selectValue">
    <option></option>
    <option data-ng-repeat="mf in SearchCtrl.manifacturers | orderBy: SearchCtrl.manifacturers">
        {{ mf }}
    </option>
</select>

现在我知道 data-ng-attr-selected="$last && selected || none"，但 selected 的问题是它不依赖于属性的值，但只需插入属性本身。

所以我的问题是，是否可以将属性应用于数组中的最后一个元素。

还有一个附带问题:如果没有结果返回到数组，是否可以将 selected 应用于数组之前的第一个 - 空选项？

抱歉，如果问题不清楚，如果不清楚，请询问，我会尽力简化，感谢您的阅读!

Answer 1

首先，在大多数情况下创建 <select> 时在 Angular 中，最简单的方法是使用 ngOptions像这样，将为您创建选项并处理添加和删除:

<select ng-model="yourModel" ng-options="element for element in array"></select>

ngOptions 的链接提供了更多自定义选项的方法，以控制选项中显示的内容以及当您选择其中一个选项时将哪些数据传递到模型。

现在，回答你的问题:

您传递到 ng-model 的变量是 2 路绑定(bind)，因此通过更改模型，您将设置 selected选项上的属性，其值与模型匹配。因此，如果您在 Controller 中执行类似的操作，它会将其设置为第一个选项:

selectValue = SearchCtrl.manifacturers[0];

最后一个你可以做的事情

selectValue = SearchCtrl.manifacturers[SearchCtrl.manifacturers.length - 1];

此外，如果数组为空，则只会选择一个空选项。现在，如果您希望它更加可重用，它只根据某些表达式选择第一个或最后一个选项，您可以为其创建一个指令。如果这不是您要问的，请澄清。