Bind to a single html element of the select-tag

Question

How can I format a single element in the select list? For example I want to bind the schoolclassCode.color property to a html-element and its background attribute.

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

its not clear what you are asking, do you want to access any option element generated by ng-repeat ? — Naeem Shaikh, Nov 03 '14 at 09:20
Yes I would like to format each ng-repeat element by binding an elements style background property to my array schoolclasses. — HelloWorld, Nov 03 '14 at 09:54

score 0 · Answer 1 · edited May 23 '17 at 12:27

0

I don't know whether it is possible to add element styles to option elements generated by ng-options. But you can add a class conditionally to all the options like this.

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

here ClassForColor and ClassForDifferentColor are css classes for setting your css styles, which will be set to your options depending on value of BooleanVariable. here you can find some more information.

edited May 23 '17 at 12:27

Community

1
1

answered Nov 03 '14 at 10:10

Naeem Shaikh

15,331
6
50
88

"I don't know whether it is possible to add element styles to option elements generated by ng-options." But this is what I exactly asked for. – HelloWorld Nov 03 '14 at 10:34

score 0 · Accepted Answer · answered Nov 03 '14 at 19:16

Ok I found a solution:

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

Now every option is rendered with a bound background color :-)

Bind to a single html element of the select-tag

2 Answers2