Setting default value in select dropdown using objects in Angular

Question

I need some help. I can't create $scope.headline.category into an object, it has to stay a string. The groupList has to be a list of objects. How can I set the initial value of the dropdown to the 2nd item (1 index)? I can set it through the controller but I have a lot of items and it seems like there should be an easier way... maybe using ng-init? Thank you for any help.

What I tried but doesn't work:

ng-init="headline.category = group.label"

What I tried that does work, but i feel like there's an easier way?

  for (var a = 0; a < $scope.headlineList.length; a++) {
    for (var b = 0; b < $scope.groupList.length; b++) {
        if ($scope.headlineList[a].category == $scope.groupList[b].label) {
            $scope.headlineList[a].category = $scope.groupList[b];
        }
    }
}

Angular

$scope.headline.category = "B";
$scope.groupList = [ {label: "A"}, {label: "B"}, {label: "C"} ];

HTML

<select ng-model="headline.category" ng-options="group.label for group in groupList"></select>

Dave · Accepted Answer · 2015-11-19 22:38:15Z

1

I think you only need the following in the controller:

app.controller('MyCtrl',function($scope){
      $scope.headline = { category: "B" }
      $scope.groupList = [ {label: "A"}, {label: "B"}, {label: "C"} ];
  });

And the select changed to:

<select ng-model="headline.category" ng-options="group.label as group.label for group in groupList"></select>

The key changes being setting headline to the object of { category: "B" } (set this way from some kind of ajax call I'm guessing) and the group.label as at the beginning of the options to indicate the value from the category objects to apply to the model.

Plunk example

answered Nov 19, 2015 at 22:38

Dave

1,6131 gold badge20 silver badges23 bronze badges

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

2 Comments

user1189352 Over a year ago

oh crap it worked! just adding the "group.label as group.label" made it work! ty so much

Dave Over a year ago

@user1189352 Also useful for saving an Id vs the label string when your lookup values are ID-Description pairings. "group.id as group.label" in that case.

Alexandr Lazarev · Accepted Answer · 2015-11-19 22:24:00Z

0

UPDATED Try:

<select ng-model="headline.category" ng-init="headline.category = groupList[index]" ng-options="group.label for group in groupList"></select>

Contoller:

angular.forEach($scope.groupList, function(value, key) {
      if(value.label == $scope.headline.category){
          $scope.index = key;  
      }
  });

PLUNKER with a demo.

edited Nov 19, 2015 at 22:24

answered Nov 19, 2015 at 22:15

Alexandr Lazarev

13k4 gold badges40 silver badges47 bronze badges

3 Comments

user1189352 Over a year ago

that does work, but maybe i didn't explain the OP well enough.i need something where the initial index will be set dynamically.. i dont know if the category will be "A", "B", or "C" so i can't just set it like that unfortunately

georgeawg Over a year ago

Maybe this answer will help. It shows how to set the initial value from the controller

user1189352 Over a year ago

@georgeawg checked it out, i guess that's what i'm doing already in the OP "What I tried that does work, but i feel like there's an easier way?". Figured there'd be something easier but i guess not.

Collectives™ on Stack Overflow

Setting default value in select dropdown using objects in Angular

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related