select ng-options issue in angular js

Question

I am trying to choose the leader of a team using 'select' ng-options feature.

Student object:

student{
name:String,
status : String
}

My code to select team leader is as below.

<select ng-model="class.team.leader" ng-options="student._id as student.name for student in curTeam.students">
    <option value="">Select leader</option>
    <option value="class.team.leader">{{class.team.leader.name}}</option>
</select>

The 'select' is storing the values correctly into the appropriate model values. But, the select is not displaying the model value properly when I go to the page view. But this code is fine for saving the details.

Requirement:

if there is no value for the model, then option value="" ==> 'Select leader' is displayed by default. if else, it should display the 'class.team.student.name'

Some one please let me know where I went wrong. Thanks.

Can you post your code

Raghavendra
– Raghavendra

2014-07-16 13:30:03 +00:00
Commented Jul 16, 2014 at 13:30 — Raghavendra
– Raghavendra, Commented Jul 16, 2014 at 13:30

Ben Diamant · Accepted Answer · 2014-07-16 13:33:35Z

1

HTML:

<select ng-model="class.team.leader" ng-options="student._id as student.name for student in curTeam.students">
    <option ng-show="!weHaveALeader" value="">Select leader</option>
    <option ng-show="weHaveALeader" value="class.team.leader">{{class.team.leader.name}}</option>
</select>

JS:

$scope.weHaveALeader = false;
$scope.$watch('class.team.leader', function(new, old) {
    $scope.weHaveALeader = true
}

answered Jul 16, 2014 at 13:33

Ben Diamant

6,2164 gold badges39 silver badges51 bronze badges

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

5 Comments

sabari Over a year ago

I agree this idea. But why should I go for watch? ng-model will defaultly reflect the change right? All I want is, with reference to the plunker , plnkr.co/edit/OZCal9ZkCQeqnQJY0WP9?p=preview, if I choose Bob and save the object class.team.leader. Then if I come back to my page, I should be able to see the chosen value 'Bob'. Obviously I cannot illustrate it in plunker as I cant connect with db. But in my project, when I reload the page, its again showing 'Select leader' instead of 'Bob'. But the value is there in the scope object.

sabari Over a year ago

Also at the time of selection, its immediately changing to 'Bob'. But reloading shows 'Select leader' thats the issue. I guess you have suggested me the 'watch' for immediate change of the select option. Thats happening my default.

Ben Diamant Over a year ago

Where do you keep the selection of 'Bob' as the team leader except of on the controller scope? @sabari

Ben Diamant Over a year ago

@sabari any progress?

sabari Over a year ago

I have edited my new code and it is displaying fine. The problem was for 'ref' type model object, I need to assign the object id and not the entire object. And with reference to your suggestion for 'watch' , is it only recommended to use watch function rather than watch object here? reference : stackoverflow.com/questions/17838745/…

runTarm · Accepted Answer · 2014-07-16 13:59:17Z

1

You could remove the second option tag, that seems unneccessary.

I've put your code into a plunker http://plnkr.co/edit/OZCal9ZkCQeqnQJY0WP9?p=preview and it seems to work fine.

<select ng-model="class.team.leader" ng-options="student._id as student.name for student in curTeam.students">
  <option value="">Select leader</option>
</select>
<div><b>Team Leader:</b> {{class.team.leader}}</div>

If that isn't what you want, please give more detail of what are missing.

answered Jul 16, 2014 at 13:59

runTarm

11.6k1 gold badge39 silver badges37 bronze badges

3 Comments

sabari Over a year ago

Hi, as I have told earlier in my post, I am able to store the model value. Suppose if I choose bob, After I save the class.team.leader object, when I reload the entire page, I am expecting the 'select' to defaultly prompt to 'Bob'.But it is again showing 'Select leader'. I hope that cannot be shown in plunker. Because that requires db to link with.

runTarm Over a year ago

I've updated the plunker to define an initial $scope.class.team.leader value in controller, and it reflect into view correctly. I think the problem may lie at somewhere else. Would you mind posting your code at where you retrieve value from db and assign to $scope.class.team.leader?

runTarm Over a year ago

I'm guessing that you might not call $scope.$apply() after assigning value from db to $scope.class.team.leader.

sabari · Accepted Answer · 2014-07-17 06:37:05Z

0

The correct method to use select ng-model is as below.

Select leader {{class.team.leader.name}}

This has solved the issue of displaying on the page reload.

answered Jul 17, 2014 at 6:37

sabari

2,6255 gold badges32 silver badges51 bronze badges

Collectives™ on Stack Overflow

select ng-options issue in angular js

3 Answers 3

5 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related