Setting up selected values for AngularJS select

问题:

EDIT - I have updated my quetion with more simplified version of what I want to do, but I will keep the original version as well.. (to keep the answers align..)

I'm fairly a beginner for AngularJS and currently having problems when trying to bind data to my select tag

What I want to do

• user clicks the edit link
• existing object loads to the page (via back end api)
• object value should be selected in the drpodown

Following is my code

#in the HTML page
<select ng-model="FormData.name"
    ng-options="n.name for n in names"
    class="form-control input-lg no-border-radius" required>
</select>

#in my service I have defined the `names` array
names: [{name: 'Superman', val: '1'}, {name: 'Batman', val: '2'}]

#this is what I do in initial form loading
$scope.name = <service name>.names;
$scope.FormData.name = $scope.names[0];

So I save the value 1 or 2 in the DB and getting it back. If the GET request is successful, I do

$scope.FormData = data; #data is the object form the server

So the problem is, when I do this, all the values are setting in the form correctly except select tags

How can I set selected values for my select tags depending on the server request.

New simplified version of my question

var names= [{name: 'Superman', val: '1'}, {name: 'Batman', val: '2'}];
$scope.names =names;
$scope.FormData = {};
$scope.FormData.name = $scope.names[1];

In the following array, instead of selecting the item by index, how can I select the item by name or the value, like

$scope.FormData.name = $scope.names['2']; #will select the {name: 'Batman', val: '2'}

回答1:

nstead of loading the value as string, try loading as INT:

names: [{name: 'Superman', val: parseInt('1')},{name: 'Batman', val: parseInt('2')}]

As you have the ng options only getting the names from the array, their id becomes their index.

You could also try:

<select ng-model="FormData.name"
    ng-options="n.val as n.name for n in names"
    class="form-control input-lg no-border-radius" ng-model="FormData.val" required>
</select>

That way the index becomes the string '1'.

EDIT:

Forgot about the ng-model.

回答2:

Few issues found with the given code :

1) $scope.name is initialized instead of $scope.names

2) $scope.FormData.name is accessed without initializing $scope.FormData

Please Find Below the corrected code :

var names= [{name: 'Superman', val: '1'},{name: 'Batman', val: '2'}];
$scope.names =names;
$scope.FormData = {};
$scope.FormData.name = $scope.names[0];

回答3:

Answer based on the new simplified version of the question : Below code can be used to initialise the dropdown based on name

var names= [{name: 'Superman', val: '1'}, {name: 'Batman', val: '2'}];
$scope.names =names;
$scope.FormData = {};
/*Iterating through the array and finding the required object based on the 'name' field*/
var isSuccess = false; //variable to prevent the iteration once the match is found
angular.forEach(names, function(name){
 if(!isSuccess && name.name === 'Batman'){
  $scope.FormData.name = name;
  isSuccess = true;
}
});
};

Kindly check if this helps!