Setting up selected values for AngularJS select

Question

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'}

Maybe not $scope.name, but $scope.names = <service name>.names;? — gorpacrate
– gorpacrate, Commented Sep 1, 2014 at 15:19
Your issue is that service data are updated but the select / controller scope data are not? — alou
– alou, Commented Sep 1, 2014 at 15:21

Michel Tomé · Accepted Answer · 2014-09-01 15:35:05Z

0

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.

answered Sep 1, 2014 at 15:35

Michel Tomé

3892 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pavi · Accepted Answer · 2014-09-01 16:56:17Z

0

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];

answered Sep 1, 2014 at 16:56

Pavi

7674 silver badges7 bronze badges

2 Comments

sameera207 Over a year ago

thanks for the answer, What I want to do is basically, select {name: 'Batman', val: '2'} without going through the index

Pavi Over a year ago

Hi @sameera207, I have provided a new answer based on your recent simplified question. Let me know if it helps.

Pavi · Accepted Answer · 2014-09-02 14:45:34Z

0

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!

answered Sep 2, 2014 at 14:45

Pavi

7674 silver badges7 bronze badges

Collectives™ on Stack Overflow

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..)

New simplified version of my question

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

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..)

New simplified version of my question

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related