Question

如何格式化选择列表中的单个元素？例如，我想将schoolclassCode.color属性绑定到html元素及其背景属性。

<select size="10" 
        class="form-control" 
        multiple 
        ng-model="activeStep.selectedSchoolclassCodes"
        ng-options="i.schoolclassCode for i in activeStep.schoolclasses">
</select>

Answer 1

我不知道是否可以将元素样式添加到ng-options生成的选项元素中。但是你可以有条件地为这样的所有选项添加一个类。

<select ng-model="foo" ng-options="x.name for x in items" 
   options-class="{ 'ClassForColor' : BooleanVariable, 'ClassForDifferentColor': !BooleanVariable}"></select>

此处ClassForColor和ClassForDifferentColor是用于设置css样式的css类，将根据BooleanVariable的值将其设置为您的选项。 here您可以找到更多信息。

Answer 2

好的，我找到了解决方案：

<select ng-model="activeStep.selectedSchoolclassCodes">
              <option ng-repeat="item in activeStep.schoolclasses" style="background: rgb({{item.color}})" value="{{item.id}}">{{item.schoolclassCode}}</option>
            </select>

现在每个选项都使用绑定的背景颜色进行渲染： - ）

绑定到select-tag的单个html元素

2 个答案: