Question

我创建了一个包含多个的select标记，将其显示为列表框而不是下拉列表。

我有一个属性，该属性应该包含选定的学校类，其中包含多个属性，如：id，schoolclass，subject，schoolclassIdentifier和color。

当我现在选择列表框中的项目并按下删除按钮时，$ scope.activeStep.selectedSchoolclassCodes数组包含一个字符串，如“Math10b”，实际上selectedSchoolclassCodes数组应包含从上述属性创建的对象。

为什么我选择的对象出错了？

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;
  };
});

Answer 1

你试过ng-options吗？ This post对带有对象数组的select / ng-options有很好的解释。

希望它可以提供帮助。

angularjs多个选定项目由字符串而不是对象组成

1 个答案: