Angular- JSON with CSS Class based on Bool

Angular- JSON with CSS Class based on Bool

by Andrew Pougher

HTML

<div ng-controller="TodoCtrl"> 
  <ul>
    <li ng-repeat="todo in todos" ng-class="{'andrewsClass': todo.on}">
      {{todo.text}} - <em>{{todo.on}}</em> 
    </li> 

  </ul>
</div>

CSS

.andrewsClass{color:red}

JavaScript

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

App.controller('TodoCtrl', function($scope, $http) {
  $http.get('json/andrewslist.json')
       .then(function(res){
          $scope.todos = res.data;                
        });
});

/* -- andrewslist.json
[{ "text":"learn angular", "done":true, "on": true },
 { "text":"build an angular app", "done":false, "on": false},
 { "text":"something", "done":false , "on": true},
 { "text":"another todo", "done":true , "on": false}]
*/