AngularJS: Using ng-selected to select multiple options, based on collection

Question

I have two arrays of objects, one array being a subset of the other:

$scope.taskGroups = [
  {id: 1, name: 'group1', description: 'description1'},
  {id: 2, name: 'group2', description: 'description2'},
  {id: 3, name: 'group3', description: 'description3'}
];

$scope.selectedGroups = [
  {id: 1, name: 'group1', description: 'description1'},
  {id: 2, name: 'group3', description: 'description3'}
];

After unsuccessfully trying to get my head around using ng-option, I thought that I could perhaps create a function to determine if an option should be selected in the select list, based on what I picked up in the documentation:

ngSelected - directive in module ng Sets the selected attribute on the element, if the expression inside ngSelected is truthy.

So, I came up with this function:

$scope.inSelectedGroups = function(taskGroup) {
  angular.forEach($scope.selectedGroups, function(group) {
    if (taskGroup.id == group.id) {
      return true;
    }
    return false;
  });
};

and tried to use it in this html:

<select multiple ng-model="selectedGroups" style="width: 100%" size="7">
    <option ng-repeat="taskGroup in taskGroups" value="{{taskGroup.id}}" ng-selected="inSelectedGroups(taskGroup)">{{taskGroup.name}}</option>
</select>

but, no dice - the full list of taskGroups shows, but the selectedTaskGroups aren't, well, selected...

Am I barking up the wrong tree here?

where you want to show the task group? in next select box or in plain text — xkeshav
– xkeshav, Commented Jun 28, 2016 at 3:54
It would all be in the same select box. The basic scenario is that I have a task that can belong to multiple task groups. When the task is edited, I want to show a select list with all of the task groups, and have the currently associated groups selected. — Trevor Turney
– Trevor Turney, Commented Jun 28, 2016 at 4:01
means when you select task from task group then that select box will show all selectedGroups in same selectbox. then where would be the other task listed? — xkeshav
– xkeshav, Commented Jun 28, 2016 at 4:04
The 'task' is separate from the 'task group'. I might have three task groups - 'daily', 'morning', and 'internal'. Then, i might have a task that belongs to the morning and internal groups. I want the select list to show all three groups, but only have morning and internal selected. — Trevor Turney
– Trevor Turney, Commented Jun 28, 2016 at 4:13

Ana Liza Pandac · Accepted Answer · 2016-06-28 03:59:38Z

3

the full list of taskGroups shows, but the selectedTaskGroups aren't, well, selected.

I tried your solution which is using the ngSelected attribute but I was unsuccessful as well so I tried using the ngOptions instead and it works.

angular.module('app', []).controller('TestController', ['$scope',
  function($scope) {
    $scope.taskGroups = [{
      id: 1,
      name: 'group1',
      description: 'description1'
    }, {
      id: 2,
      name: 'group2',
      description: 'description2'
    }, {
      id: 3,
      name: 'group3',
      description: 'description3'
    }];

    $scope.selectedGroups = [{
      id: 1,
      name: 'group1',
      description: 'description1'
    }, {
      id: 2,
      name: 'group3',
      description: 'description3'
    }];


  }
])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="TestController">
  <select multiple="true" ng-model="selectedGroups" style="width: 100%" ng-options="taskGroup.id as taskGroup.description for taskGroup in taskGroups track by taskGroup.id" size="7">
  </select>
</div>

answered Jun 28, 2016 at 3:59

Ana Liza Pandac

4,8912 gold badges26 silver badges37 bronze badges

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

5 Comments

Trevor Turney Over a year ago

Thanks alex_andrea, this did the trick! It turns out that I was pretty close with my 'ng-options' attempt; I was using the wrong table in the in clause. (Not calling the directive ng-option probably would have helped, as well...) This makes sense, and I've definitely learned something today... +1 :)

Trevor Turney Over a year ago

This does work, in that the proper task groups show up as selected, and rightfully marked as an answer. The only other issue that I see is that, if I try to change the task groups for the task, the selections seem to be broken - can no longer remove groups or add additional ones. Any thoughts on that? I am keeping an eye on the selected groups with a $watch... Thanks again! :)

Ana Liza Pandac Over a year ago

@TrevorTurney can you give me a fiddle on that? Thanks.

Trevor Turney Over a year ago

@alex-andrea - Here's the fiddle. I basically started from the snippet that you provided, which shows the behavior on its own. When run, the select shows all of the groups, with the proper groups selected, and the selected groups display below the select box. If you try to select one or more groups, the selections go away, and you see the keys for the selected groups below the box, though no options show as selected. Sorry if the fiddle looks funky; it's the first time that I've fiddled a fiddle... :)

Ana Liza Pandac Over a year ago

@TrevorTurney I get it now. Thanks. I've realized that the current value assigned to the options are the id of the taskGroup which is wrong because it's should be the selected taskGroup object. To fix it, just change ng-options to this ng-options="taskGroup as taskGroup.description for taskGroup in taskGroups track by taskGroup.id"

Raman Sahasi · Accepted Answer · 2016-06-28 03:57:38Z

1

See carefully, you are returning Boolean value from function defined in angular.forEach parameter and so nothing is returned from inSelectedGroups function

Try modifying your function to:

$scope.inSelectedGroups = function(taskGroup) {
  var flag = false;
  angular.forEach($scope.selectedGroups, function(group) {
    if (taskGroup.id == group.id) {
      flag = true;
      return;
    }
    flag = false;
    return;
  });
  return flag;
};

answered Jun 28, 2016 at 3:57

Raman Sahasi

32.1k9 gold badges63 silver badges74 bronze badges

1 Comment

Trevor Turney Over a year ago

This didn't seem to work. I get the full list of task groups, but none are selected. Also, I would have thought that returning true would have broken out of the function, and not just the forEach block. Is that not the case?

Collectives™ on Stack Overflow

AngularJS: Using ng-selected to select multiple options, based on collection

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related