Angular: Empty Fiddle

http://angularjs.org/

by Zmetser

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
<i ng-class="{'true-class': phone.isChecked, 'false-class': !phone.isChecked}">{{phone.isChecked | checkmark}}</i>
<i ng-class="{'true-class': phone2.isChecked, 'false-class': !phone2.isChecked}">{{phone2.isChecked | checkmark}}</i>
</div>

CSS

.true-class {
    color: green;
    font-weight: bold;
}

.false-class {
    color: red;
    font-weight: bold;
}

JavaScript

var myApp = angular.module('myApp',[]);

myApp.filter('checkmark', function() {
  return function(input) {
    return input ? 'true-class' : 'false-class';
  };
});

function MyCtrl($scope) {
    $scope.phone = {
        isChecked: true,
    };
    
    $scope.phone2 = {
        isChecked: false,
    };
}