Question

我有各种版本的下拉列表。对于第一个版本，我想在下拉列表中为显示的文本添加“最新”，是否有一种简单的方法可以做到这一点？

HTML：

<select ng-model='selectedVersion'
        ng-options="version.name for version in versions"
        class="form-control">
</select>

JS：

$scope.versions = [
    { name: "3.0" },
    { name: "2.0" },
    { name: "1.0" },
]
$scope.selectedVersion = $scope.versions[0];

所以现在下拉列表显示“3.0”，“2.0”，“1.0”，但我希望第一个选项是“3.0（最新）”。

我可以直接更改对象名称，但是我将所选对象传递给另一个范围并导致问题，因此这将不稳定：

$scope.versions[0].name += " (latest)";

如果可能的话，我只想在下拉列表中显示“最新”。谢谢！

Answer 1

如果你的阵列总是先有最新的，你可以这样做：

<select ng-model='selectedVersion'
    ng-options="(version.name == versions[0].name ? 'latest' : version.name) for version in versions"
    class="form-control">
</select>

Answer 2

更好地包装到命名空间中以避免范围之间的问题

JS

function MyCntrl($scope) {
  var versions = [{ name: "3.0" }, { name: "2.0" }, { name: "1.0" },];
  $scope.prop = {
    "value": versions[0], 
    "values": versions 
  };
}

HTML

<div ng-controller="MyCntrl">
  <select ng-model="prop.value" ng-options="v.name for v in prop.values">
  </select>

</div>

Preview

在Angular中更改第一个ng-options文本

2 个答案:

JS

HTML