How to Multiple Default Select Option in AngularJS?

Question

I'd like to have multiple default selected option in AngularJs.

In my controller code:

  $scope.selectedFvs = ['fvid9', 'fvid2'];

  $scope.fields = [{
    id: 'fid1',
    name: 'f name 1',
    fieldValues: [{
      id: 'fvid1',
      name: 'fv name 1',
    }, {
      id: 'fvid2',
      name: 'fv name 2'
    }]
  }, {
    id: 'fid2',
    name: 'f name 2',
    fieldValues: [{
      id: 'fvid3',
      name: 'fv name 3',
    }, {
      id: 'fvid4',
      name: 'fv name 4'
    }, {
      id: 'fvid5',
      name: 'fv name 5',
    }, {
      id: 'fvid6',
      name: 'fv name 6'
    }]
  }, {
    id: 'fid3',
    name: 'f name 3',
    fieldValues: [{
      id: 'fvid7',
      name: 'fv name 7',
    }, {
      id: 'fvid8',
      name: 'fv name 8'
    }, {
      id: 'fvid9',
      name: 'fv name 9',
    }]
  }];

In HTML code:

  <div ng-repeat="field in fields">
    <label>{{::field.name}}</label>
    <select ng-init="fields[field.id] = selectedFvs[1]" ng-model="fields[field.id]">
      <option value="select-all">Select All</option>
      <option ng-repeat="fieldValue in field.fieldValues" value="{{::fieldValue.id}}">{{fieldValue.name}}</option>
    </select>
  </div>

This renders with 'fv name 5' as default selected field value because in the HTML code, the select tag, the ng-init is set to the second index of selectedFvs:

However, this is not what I want. What I really want is the 3 selects have the default value of selectedFvs. It would look like this if it works,

Here is the Plunker link to this code.

Before edited $scope.selectedFvs = ['fvid2', 'fvid5', 'fvid9'], and after edited $scope.selectedFvs = ['fvid9', 'fvid2']; I get the $scope.selectedFvs = ['fvid2', 'fvid5', 'fvid9'] to work by changing selectedFvs[1] in the HTML code to selectedFvs[$index]. But when $scope.selectedFvs = ['fvid9', 'fvid2'], I'm stuck. — Vicheanak
– Vicheanak, Commented Nov 6, 2015 at 11:56

Partha Sarathi Ghosh · Accepted Answer · 2015-11-06 12:15:35Z

2

Use $index as follows

<div ng-repeat="field in fields">
    <label>{{::field.name}}</label>
    <select ng-init="fields[field.id] = (selectedFvs|findselected: field.fieldValues)" ng-model="fields[field.id]">
      <option value="select-all">Select All</option>
      <option ng-repeat="fieldValue in field.fieldValues" value="{{::fieldValue.id}}">{{fieldValue.name}}</option>
    </select>
  </div>

Uae this filter as well

app.filter("findselected", function() { // register new filter

  return function(inputs, fields) { // filter arguments
    var selected = '';
    angular.forEach(inputs, function(val1){
         angular.forEach(fields, function(val2){
           if(val1 === val2.id){
             selected = val1;
           }
         })
    });
    return selected;
  };
});

See this Plunker

edited Nov 6, 2015 at 12:15

answered Nov 6, 2015 at 11:15

Partha Sarathi Ghosh

11.7k22 gold badges64 silver badges84 bronze badges

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

2 Comments

Vicheanak Over a year ago

Thanks, that's working, I just recently ran up to a new issue when I change the $scope.selectedFvs to $scope.selectedFvs = ['fvid9', 'fvid2']; The expected answer looks like the last image in the edited question.

Partha Sarathi Ghosh Over a year ago

@Vicheanak Then create a new filter for that. Updated the answer. If it works accept the answer and upvote also. :)

Rashad Ibrahimov · Accepted Answer · 2015-11-06 11:16:09Z

1

Use selectedFvs[$index] instead of selectedFvs[1]

answered Nov 6, 2015 at 11:16

Rashad Ibrahimov

3,3193 gold badges21 silver badges41 bronze badges

5 Comments

Vicheanak Over a year ago

Awesome! Working great.

Vicheanak Over a year ago

What if the $scope.selectedFvs = ['fvid2', 'fvid5', 'fvid9'] is changed to $scope.selectedFvs = ['fvid9', 'fvid2'];

Rashad Ibrahimov Over a year ago

Sorry, misunderstood a little. You need some filter, and I guess @Partha already give a right solution :)

Vicheanak Over a year ago

I was the one who explained incorrectly. Thank you so much for your effort.

Rashad Ibrahimov Over a year ago

You are welcome, always glad to help, but actually I didn't do anything :)

Collectives™ on Stack Overflow

How to Multiple Default Select Option in AngularJS?

2 Answers 2

2 Comments

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Related