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>

score 1 · Accepted Answer · answered Nov 19 '15 at 22:38

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 '15 at 22:38

Dave

1,533
1
19
23

oh crap it worked! just adding the "group.label as group.label" made it work! ty so much – user1189352 Nov 19 '15 at 22:41
1

@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. – Dave Nov 19 '15 at 22:42

Alexandr Lazarev · Answer 2 · 2015-11-19T22:24:00.773

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 '15 at 22:24

answered Nov 19 '15 at 22:15

Alexandr Lazarev

12,554
4
38
47

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 – user1189352 Nov 19 '15 at 22:20
Maybe [this answer](http://stackoverflow.com/questions/17645620/ng-selected-not-working-in-select-element/17646636#17646636) will help. It shows how to set the initial value from the controller – georgeawg Nov 19 '15 at 22:22
@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. – user1189352 Nov 19 '15 at 22:27

Setting default value in select dropdown using objects in Angular

2 Answers2