Today, I wanted to bind value from a select to a span. Depending on the value selected the colour of the label was supposed to be different. Using AngularJS, I introduced ng-class="". It allows you to change classes conditionally. This is an example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<select ng-model="observation.status"> <option value="final">Final</option> <option value="preliminary">Preliminary</option> <option value="registered">Registered</option> <option value="amended">Amended</option> <option value="cancelled">Cancelled</option> <option value="entered in error">Entered in Error</option> </select> <div class="col-xs-4"> <span class="label" ng-class="{ 'label-success': observation.status == 'final', 'label-warning': observation.status == 'preliminary', 'label-primary': observation.status == 'registered', 'label-info': observation.status == 'amended', 'label-default': observation.status == 'cancelled', 'label-danger': observation.status == 'entered in error'}" ng-bind="observation.status"></span> </div> |