CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
sabari
sabari

Reputation: 2625

select ng-options issue in angular js

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.

Upvotes: 0

Views: 388

Answers (3)

sabari
sabari

Reputation: 2625

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.

Upvotes: 0

runTarm
runTarm

Reputation: 11547

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.

Upvotes: 1

Ben Diamant
Ben Diamant

Reputation: 6206

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
}

Upvotes: 1

Related Questions