Wie lege ich eine Standard-Winkelauswahloption als letzte Option fest?

Question

Ich habe den folgenden Code. Ich versuche, die Standardoption als letzte Option im Auswahlfeld festzulegen. Wenn ich die Länge in der ng-init fest codiere, funktioniert es. ng-init="mySelect = 3" Aber nicht mit ng-init="mySelect = myData.length-1"

Irgendwelche Ideen, um es auf die letzte Option einzustellen?

$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> 

Answer 1

Ich konnte dies erreichen, indem Sie ng-selected in den Optionen-Attributen verwenden.

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

Answer 2

Mit ng-selected und die $index Zähler wir bedingt ng-selected="true" für die letzte Option kann durch Prüfen, dass $index bis zum letzten Index Ihrer myData Array gleich ist (myData.length - 1). Zum Beispiel:

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

Oder wie @ wickY26 wies darauf hin, können wir dies auch $last mit erreichen:

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

Sie sollten jedoch einen Blick auf die ng-options directive, die eine bestimmte Implementierung des ng-repeat Verhalten aber für <select> Elemente:

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

Answer 3

Versuchen Sie folgendes:

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

Answer 4

Der springende Punkt von Angular (oder anderen MVVM-Frameworks) ist, dass Sie es aus einem ViewModel betrachten können und die gebundene View spiegeln.

Das bedeutet, dass wenn Sie etwas auswählen möchten oder einige <input type="checkbox"> voreingestellt sind - ordnen Sie einfach den gewünschten Zustand dem ViewModel zu.

Weisen Sie in Ihrem Fall mySelect dem zu, wofür Sie das ViewModel standardmäßig benötigen. Und die Ansicht wird folgen.

$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> 

keinem Zusammenhang mit der Frage, aber es ist besser ng-options statt ng-repeat zu verwenden, aber gleiche Idee gilt:

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

Nur ng-selected mit nicht das zugrunde liegende Modell ändern, was ist letztlich wichtig in einer Angular-Anwendung.