angularjs multiple selected item does consist of a string and not an object

Question

I have created a select tag with multiple to show it as a listbox and not dropdown.

I have a property which should hold the selected schoolclass which consists of multiple properties like: id, schoolclass , subject, schoolclassIdentifier and color.

When I select now an item in the listbox and press the delete button the $scope.activeStep.selectedSchoolclassCodes array contains one string like "Math10b" actually the selectedSchoolclassCodes array should contain an object created from the above properties.

Why is my selected object wrong?

HTML

<div class="col-md-6">
<select size="10"  class="form-control col-md-6" multiple ng-model="activeStep.selectedSchoolclassCodes">
  <option class="co-md-6" ng-repeat="item in activeStep.schoolclasses" style="background: rgb({{item.color}})" value="{{item.schoolclassCode}}">{{item.schoolclassCode}}</option>
</select>
</div>

CONTROLLER

'use strict';
angular.module('iplanmylessons').controller('EditSchoolclassCodeWizardStepController', function ($scope, wizardDataFactory, SchoolclassCodeViewModel) {

  $scope.activeStep.schoolclassCodeColors = [
    '255,165,0',
    '255,255,0',
    '145,240,140',
    '0,128,0',
    '170,210,230',
    '255,190,200',
    '240,130,240',
    '100,100,255',
    '210,210,210',
    '255,0,0'
  ];

  $scope.activeStep.selectedSchoolclassCodes = wizardDataFactory.schoolclassCodesAdded[0];
  $scope.activeStep.newSchoolclass = "";
  $scope.activeStep.newSubject = "";
  $scope.activeStep.newSchoolclassIdentifier = "";
  $scope.activeStep.schoolclasses = wizardDataFactory.schoolclassCodesAdded;
  $scope.activeStep.schoolclassCodeColorsIsOpen = false;
  $scope.activeStep.selectedSchoolclassCodeColor = null;

  $scope.activeStep.deleteSchoolclassCode = function () {
    for (var i = 0; i < $scope.activeStep.selectedSchoolclassCodes.length; i++) {
      var index = Enumerable.from( wizardDataFactory.schoolclassCodesAdded).indexOf(function (s) {
          return s.schoolclassCode === $scope.activeStep.selectedSchoolclassCodes[i].schoolclassCode;
        });

      wizardDataFactory.schoolclassCodesAdded.splice(index, 1);
    }
    $scope.activeStep.selectedSchoolclassCodes = null;
  };

  $scope.activeStep.schoolclassCode = function () {
    return $scope.activeStep.newSubject + $scope.activeStep.newSchoolclass + $scope.activeStep.newSchoolclassIdentifier;
  };

  $scope.activeStep.setSchoolclassCodeColor = function (item) {
    $scope.activeStep.selectedSchoolclassCodeColor = item;
    $scope.activeStep.schoolclassCodeColorsIsOpen = false;
  };
});

score 0 · Answer 1 · edited May 23 '17 at 11:49

0

Have you try ng-options? This post has a good explanation of select/ ng-options with array of objects.

Hope it can help.

edited May 23 '17 at 11:49

Community

1
1

answered Nov 07 '14 at 21:10

Thierry

5,133
3
25
30

yes I tried it before but with ng-options I could not format an option`s background color bound to a property of a complex object. With ng-repeat that was possible. – Pascal Nov 08 '14 at 09:25
This guy is saying the same I said: http://stackoverflow.com/questions/25658311/give-styling-to-select-option-group => use ng-repeat, but in my case I need to bind to an object not a list of strings... seems I have to use this custom directive sollution: http://stackoverflow.com/questions/15264051/how-to-use-ng-class-in-select-with-ng-options – Pascal Nov 08 '14 at 15:24

angularjs multiple selected item does consist of a string and not an object

1 Answers1