AngularJS: ng-class

by Alberto Naperi Jr.

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<div ng-controller="YourCtrl">
    <h2 ng-repeat-start="(key, value) in profileCompare">{{key}}</h2>
  <ul class="comparison-list">
    <li ng-repeat="importance in value.questionImportance track by $index">
      {{importance}}
    </li>
  </ul>
  <ul ng-repeat-end class="comparison-list">
    <li ng-repeat="answer in value.questionAnswer track by $index" ng-if="answer == true" style="color: green">
    {{answer}}
    </li>
    <li ng-repeat="answer in value.questionAnswer track by $index" ng-if="answer == false" style="color: red">
    {{answer}}
    </li>
  </ul>
</div>

JavaScript

'use strict';
var app = angular.module('myApp', []);
app.controller('YourCtrl', ['$scope', function($scope) {
    
        $scope.profileCompare = {

        You: {
            name: "You",
            questionAnswer: [false, true, false, false, false, false],
            questionImportance: [false, true, false]
        },
        Pizza: {
            name: "Pizza",
            questionAnswer: [true, false, false, false, false, false],
            questionImportance: [false, false, true]
        },
        Greenie: {
            name: "Greenie",
            questionAnswer: [false, true, false, false, true, false],
            questionImportance: [true, false, false]
        }
    }

    }]);