2017-05-30 9 views
0

Hallo Ich entwickle Web-Anwendung in angularjs. Ich habe ein HTML-Formular innerhalb der Dropdown-Box. Ich habe hier zwei Szenarien. Zuerst verbinde ich Werte zum Dropdown wie unten.Wie setze ich den Wert in der Dropdownliste in Angularjs?

<select ng-model="user.Nationality" 
     name="nationality" 
     id="Nationality" 
     ng-options="user.Nationality for user in nationalityList" 
     required> 
    <option value="" label="Nationality">Nationality</option> 
</select> 

Zweites Szenario ist auf Seite laden zuvor ausgewählte Daten, die ich binden möchte, wenn vorhanden ist. Wenn für einige bereits Daten für die Nationalität verwendet werden, zum Beispiel wenn der Benutzer zuvor die Nationalität als Indien ausgewählt hat, dann möchte ich bei der Seitenladung nur Indien mit Dropdown verknüpfen. Unten ist mein Objekt empfangen in einem API-Anruf.

"NationalitObj": 
{ 
     "ID":1, 
     "Nationality":"indian" 
}, 

Jetzt möchte ich Nationalität als Indien für die oben genannte dropdoownboxlist setzen.

Unten ist der Code, wie ich Wert für die Nationalität zu setzen versuche.

$scope.nationalityList = PersonalInfo.NationalitObj; 
$scope.user.Nationality = $scope.nationalityList.Nationality; 

Dies führt zu Fehler Kann die Eigenschaft 'Nationalität' von undefined nicht festlegen. Darf ich wissen, wie kann ich das tun? Jede Hilfe wäre willkommen.

Vielen Dank im Voraus.

+0

Vor dem Gebrauch dieses $ scope.user.Nationality erklären wie $ scope.user = []; – Gopalakrishnan

+0

schaue in Versprechungen, wenn du wanr nach dem ersten ausgeführt werden sollst. $ q.when kann deine Lösung sein –

+0

Danke. Funktioniert nicht. –

Antwort

1

Siehe dazu:

angular.module("app",[]) 
 
    .controller("ctrl",['$scope',function($scope){ 
 
    $scope.nationalityList = [ 
 
     {Id:1, Nationality:'Indian'}, 
 
     {id:2, Nationality:'American'} 
 
    ]  
 
    $scope.user = {}; 
 
    $scope.user.Nationality = $scope.nationalityList[0].Id; 
 
    }])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<html> 
 
<body ng-app="app" ng-controller="ctrl"> 
 
<select ng-model="user.Nationality" 
 
     name="nationality" 
 
     id="Nationality" 
 
     ng-options="user.Id as user.Nationality for user in nationalityList" 
 
     required> 
 
    <option value="" label="Nationality">Nationality</option> 
 
</select> 
 
</body> 
 
<html>

+0

Wenn die API "NationalitObj" zurückgibt: {"ID": 1, "Nationalität": "indisch"} was soll ich dann im obigen Code ändern? –

+0

$ scope.user.Nationality = $ scope.NationalitObj.Id; Zuweisen wie folgt – Jenny

+0

$ scope.user = {}; $ scope.user.Nationality = PersonalInfo.NationalitObj.ID; Das sollte richtig funktionieren? –

Verwandte Themen