JSFiddle - React, Tailwind, and code Playground

Example 3, maps the model property isChecked to a class namechecked and at the same time keeps CSS classes out of Controller code.While ex1&2

by gogirl

HTML

<div ng-app="app" ng-controller="myController">
    <div ng-class="{r: isRed, b: isBold, u: isUnderlined}">Text</div>
    <hr/>
    <ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
        <li ng-repeat="name in names"> <span ng-class-odd="'r'" ng-class-even=" ">
         {{name}} &nbsp; &nbsp; &nbsp;
       </span>

        </li>
    </ol>
    <hr/>
    <section ng-repeat="item in items"><span ng-class-odd="'r'" ng-class-even=" ">
        <div  ng-class="{true: 'checked'}[isChecked]"> <b> <input type="checkbox" ng-model="isChecked" />
                Id is: {{item.id}} ==={{$index +1}} isChecked=
              </b>{{isChecked}}</div>
    </section>
</div>

CSS

.r {
    color:red
}
.b {
    font-weight:bold
}
.u {
    text-decoration:underline
}
.zebra {
    background: #444;
}
.checked {
    background: #444;
    color:white;
}
.left {
    float:left;
}

JavaScript

//1.should result in class="r b" when both are true in controller.
//2.should result in class="r  when item is odd, default black.
//3. same as 2 but changes style to selected when chosen
var app = angular.module('app', [])
    .controller('myController', function ($scope) {
    //ex 1.
    $scope.isRed = true;
    $scope.isBold = true;
    //ex 2.
    $scope.isUnderlined = false;
    //ex 3.
    $scope.isChecked = false;
    $scope.items = [{
        id: 1,
        key: 'val1'
    }, {
        id: 2,
        key: 'val2'
    }, {
        id: 3,
        key: 'val3'
    }];
}

);

// ng-class="['r', ' '][$index %2] item.id != 2"