如何将默认角度选择选项设置为最后一个选项？

I have the following code. I'm trying to set the default option as the last option in the select box. If I hardcode the length in the ng-init it works. ng-init="mySelect = 3" But not with ng-init="mySelect = myData.length-1"

我有以下代码。我正在尝试将默认选项设置为选择框中的最后一个选项。如果我在ng-init中对其长度进行硬编码就可以了。 ng-init =“mySelect = 3”但不是ng-init =“mySelect = myData.length-1”

Any ideas how to set it to the last option?

有任何想法如何将其设置为最后一个选项?

$scope.myData = ['a','b','c'];

<select class="form-control" ng-init="mySelect = myData.length-1" ng-model="mySelect">
    <option ng-repeat="$index in  myData" value="{{ $index }}" >Select This Option #({{ $index+1 }})</option>
</select>

4 个解决方案

#1

Using ng-selected and the $index counter we can conditionally set ng-selected="true" for the last option by checking that $index is equal to the last index of your myData array (myData.length - 1). For example:

使用ng-selected和$ index计数器,我们可以通过检查$ index是否等于myData数组的最后一个索引(myData.length - 1)来有条件地为最后一个选项设置ng-selected =“true”。例如:

<option ng-selected="{{$index === myData.length - 1}}"></option>

Or as @wickY26 pointed out, we can also accomplish this using $last:

或者正如@ wickY26指出的那样,我们也可以使用$ last来完成这个:

<option ng-selected="$last"></option>

You should however take a look at the ng-options directive which is a particular implementation of the ng-repeat behaviour but for <select> elements:

但是,您应该查看ng-options指令,该指令是ng-repeat行为的特定实现,但对于

<select 
    class="form-control"
    ng-init="mySelect = myData[myData.length - 1]"
    ng-model="mySelect"
    ng-options="data for data in myData">
</select>

#2

I was able to achive this by using ng-selected in the options attributes.

我可以通过在选项属性中使用ng-selected来实现这一点。

ng-selected="{{$index==myData.length-1}}"

#3

Try this:

<select class="form-control" ng-model="mySelect" 
 ng-options="item for item in  myData" ng-init="mySelect = myData[myData.length -1]">
</select>

#4

The whole point of Angular (or other MVVM frameworks) is that you could reason it terms of a ViewModel and have the bound View reflect it.

Angular(或其他MVVM框架)的重点在于您可以推理ViewModel的术语并让绑定的View反映它。

What that means is that if you need something to be selected or some <input type="checkbox"> preset - just assign the desired state to the ViewModel.

这意味着如果您需要选择某些内容或某些预设 - 只需将所需状态分配给ViewModel。

In your case, assign mySelect to what you need the ViewModel to be assigned to by default. And the View will follow.

在您的情况下,将mySelect指定为默认情况下要分配给ViewModel的内容。视图将随之而来。

$scope.myData = ['a','b','c'];
$scope.mySelect = $scope.myData[$scope.myData.length - 1]; // last value

<select ng-model="mySelect">
  <option ng-repeat="item in myData" value="item">{{item}}</option>
</select>

Unrelated to the question, but it's better to use ng-options instead of ng-repeat, but same idea applies:

与问题无关,但最好使用ng-options而不是ng-repeat,但同样的想法适用:

<select ng-model="mySelect"
        ng-options="item for item in myData">
</select>

Just using ng-selected doesn't change the underlying model, which is what is ultimately important in an Angular application.

仅使用ng-selected不会更改底层模型,这在Angular应用程序中最重要。

#1

<option ng-selected="{{$index === myData.length - 1}}"></option>