Binding Angularjs select items to model using property of item

Question

I have a collection as follows:

$scope.TeamType = [
    {
        "name": "Beginner",
        "value": 0
    },
    {
        "name": "Novice",
        "value": 1
    },
    {
        "name": "Expert",
        "value": 2
    },
    {
        "name": "Masters",
        "value": 3
    }];

I also have a variable in my controller:

$scope.SelectedTeamType = 0;

I am trying to use these items in the following statement

<select ng-model="SelectedTeamType" ng-options="v as v.name for v in TeamType track by v.value"></select>

I would like the select to init with the corresponding value in the model and save the value to the model when select changes. I am not sure why the model SelectedTeamType is getting the entire object stored to it instead of the v.value and why it isnt initializing with beginner.

Satpal · Accepted Answer · 2015-02-13 17:33:19Z

1

As per comment I need to keep $scope.SelectedTeamType as an integer value

Use

<select 
    ng-model="SelectedTeamType" 
    ng-options="v.value as v.name for v in TeamType"
 ></select>

DEMO

Its storing object due to expression which you have provided in ngOptions.

You need to bind object, use

$scope.SelectedTeamType = $scope.TeamType[0];

better

$scope.SelectedTeamType = $scope.TeamType.filter(function(t) { return t.value == 0; });

edited Feb 13, 2015 at 17:33

answered Feb 13, 2015 at 17:09

Satpal

133k13 gold badges168 silver badges171 bronze badges

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

2 Comments

user3648646 Over a year ago

I need to keep $scope.SelectedTeamType as an integer value

Satpal Over a year ago

@user3648646, then simply use v.value as v.name for v in TeamType in ng-options refer select as label for value in array in docs

Collectives™ on Stack Overflow

Binding Angularjs select items to model using property of item

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related