it-swarm.com.de

So legen Sie den Standardwert in ng-options fest

Ich kann eine Dropdown-Liste mit Standardwert in anglejs festlegen als

 <select name="repeatSelect" id="repeatSelect" ng-model="repeatSelect" ng-init=" repeatSelect = data[0].id">
    <option ng-repeat="option in data" value="{{option.id}}">{{option.name}}</option>
 </select>

Wie kann ich dasselbe mit ng-options erreichen? Ich habe mit

 <select name="repeatSelect" 
   id="repeatSelect" 
   ng-model="repeatSelect"
   ng-init=" repeatSelect = option.id"  
   ng-options="option.name for option in data track by option.id">
</select>

Aber keine Verwendung. Probe Geige ist da

11
mpsbhat

Verwenden Sie ng-init, um den Standardwert für ng-options festzulegen.

Hier ist die: demo

<select name="repeatSelect" 
   id="repeatSelect" 
   ng-model="repeatSelect"
   ng-init=" repeatSelect = data[0].id"  
   ng-options="option.id as option.name for option in data">          
</select>
19
Upal Roy

Alle diese Miss-Verwendung von ng-init.

Aus den eckigen Dokumenten:

Diese Direktive kann missbraucht werden, um unnötige Logik in Ihre Vorlagen einzufügen. Es gibt nur wenige geeignete Anwendungen von ngInit, z. B. zum Aliasing spezieller Eigenschaften von ngRepeat, wie in der folgenden Demo dargestellt. und zum Einfügen von Daten über serverseitige Skripterstellung. Abgesehen von diesen wenigen Fällen sollten Sie Controller anstelle von ngInit verwenden, um Werte für einen Bereich zu initialisieren.

Quelldokumente

Meines Erachtens besteht der korrekte Weg zum Festlegen eines Standardwerts darin, Ihre ng-model-Eigenschaft einfach mit dem aus Ihrem ng-options ausgewählten Wert auszufüllen.

Wenn Sie die $scope-Eigenschaft definieren, bindet Ihr select den Standardwert aus Ihrem data-Array. Wenn Ihr data-Array von einer Ajax-Anforderung stammt, weisen Sie es einfach zu, sobald Sie die data haben.

.controller('test', ['$scope', function ($scope) {
    $scope.data = [{name: 'one', id: 1}, {name: 'two', id: 2},{name: 'three', id: 3}];
    $scope.repeatSelect= $scope.data[0];
}]);

Es gibt einen Vorbehalt zu beachten. Wenn Sie das as-Schlüsselwort in Ihrem Ausdruck verwenden, müssen Sie Ihrem ng-model die tatsächliche Eigenschaft zuweisen, die Sie dazu sagen müssen.

Volle Geige-Demo anzeigen: http://jsfiddle.net/kb99gee8/

8
ste2425

ich habe erreicht, was Sie benötigen, indem Sie Ihren Code und ng-options wie Sie erwähnt haben, hier ist Working Fiddle

Vollständiger CODE

<div ng-app="ngrepeatSelect">
    <div ng-controller="ExampleController">
        <form name="myForm">
            <label for="repeatSelect">Angular select:</label>
            <select name="repeatSelect" 
   id="repeatSelect" 
   ng-model="repeatSelect"
   ng-init=" repeatSelect = data[0]"  
   ng-options="option.name for option in data track by option.id">
</select>
        </form>
        <br/> <tt>Selected value: {{repeatSelect.id}}</tt>

    </div>
</div>
<br/>
1
Manoj Salvi

Ich werde ein Beispiel vorschlagen HTML-Teil

<select class="form-control" ng-model="data.selectedOption" required ng-options="option.name as option.name for option in venueNamelists"  ng-change="getmediationRooms(data.selectedOption)"></select>

In meinem Controller

$ scope.data = {selectedOption: $ scope.venueNamelists [i] .name};

der Modellwert sollte dem Schlüssel/Wert-Paar in den VenueNamelists entsprechen.

0
athira renjan