2016-02-09 6 views
7

Ich versuche den Standardwert der Optionen zu setzen Ich benutze Select und ng-repeat. Ich bekomme Daten in js-Datei und ich rufe Modell, um dort Wert einzustellen.ng-selected funktioniert nicht mit ng-repeat um den Standardwert zu setzen

Bitte lesen Sie unten Code:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Example - example-ngrepeat-select-production</title> 


    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script> 
    <script src="app.js"></script> 



</head> 
<body ng-app="ngrepeatSelect"> 
    <div ng-controller="ExampleController"> 
    <form name="myForm"> 
    <label for="repeatSelect"> Repeat select: </label> 
    <select ng-model="datamodel"> 
     <option ng-repeat="dataitem in data" 
       ng-selected ="{{dataitem == datamodel}}">{{dataitem}}</option> 
    </select> 
    </form> 
    <hr> 
    <tt>repeatSelect = {{datamodel}}</tt><br/> 
</div> 
</body> 
</html> 

app.js Datei

(function(angular) { 
    'use strict'; 
angular.module('ngrepeatSelect', []) 
    .controller('ExampleController', ['$scope', function($scope) { 
    $scope.data = [1,2,3,4,5]; 

    $scope.datamodel = 2; 
}]); 
})(window.angular); 

Hier ist meine plunker

Antwort

9

Vom angular docs:

Beachten Sie, dass Der Wert einer Auswahlanweisung, die ohne ngOptions verwendet wird, ist immer eine Zeichenfolge. Wenn das Modell an einen Nicht-String-Wert gebunden werden muss, müssen Sie es entweder explizit mit einer Direktive konvertieren (siehe unten ) oder mithilfe von ngOptions die Optionen festlegen. Dies ist , da ein Optionselement nur an Zeichenfolgenwerte unter gebunden werden kann.

So ändert sich $scope.datamodel = 2; zu $scope.datamodel = '2'; funktioniert. Siehe aktualisiert plunker.

Es ist jedoch besser, stattdessen ngOptions zu verwenden. Auch aus der Dokumentation:

In vielen Fällen kann ngRepeat statt ngOptions auf <option> Elemente verwendet werden, um ein ähnliches Ergebnis zu erzielen. Allerdings bietet ngOptions einige Vorteile, wie mehr Flexibilität in wie das <select> Modell ist zugewiesen über die Auswahl als Teil des Verständnis Ausdruck, und zusätzlich Speicher zu reduzieren und zunehmende Geschwindigkeit durch die Schaffung eines neuen Umfang für jeden wiederholte Instanz.

So Ihr Modell als eine ganze Zahl zu halten, können Sie eher verwenden:

<select ng-model="datamodel" ng-options="dataitem for dataitem in data"> 
    <option value="">Please Select</option> 
</select> 

Siehe plunker

+0

Es funktioniert! Genial ! Ich konvertiere nur Integer in String und alle setzen. – FShah

+0

Ich versuche, maximale Anzahl als Standardwert, aber nicht aus. Js-Datei, so dass ich mit ng-Wiederholung bin. Hier ist Link: (http://plnkr.co/edit/zJbQTVPaErP2dKe5gUXv?p=preview) – FShah

+0

@FShah denke, Sie können immer noch 'ng-Optionen' verwenden, können Sie Ihren Plunker Gabel, um zu zeigen, was du meinst? Sie können möglicherweise 'ng-init' verwenden, um Ihren Modellwert auf das letzte Element in der Liste zu setzen, wenn die Liste von min bis max sortiert ist. – user2718281