Two arrays of objects are causing me some confusion, with 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'}
];
In an attempt to understand how to use ng-option, I decided to create a function that would determine if an option should be selected in the select list. This decision was based on insights from the documentation:
ngSelected - directive in module ng Sets the selected attribute on the element, if the expression inside ngSelected is truthy.
This led me to develop the following function:
$scope.inSelectedGroups = function(taskGroup) {
angular.forEach($scope.selectedGroups, function(group) {
if (taskGroup.id == group.id) {
return true;
}
return false;
});
};
I then attempted to incorporate this function into the following HTML code:
<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>
Unfortunately, the full list of taskGroups is displayed, but the selectedTaskGroups are not actually selected...
Could it be that I am heading down the wrong path with this approach?