Usando ngclass

by Alejandro M

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-app="filterExampleApp" ng-controller="FilterExampleController">
  <p ng-class="{positivo: total> 0, negativo: total <= 0}">
    El total es: {{total}}
  </p>
  <p ng-class="[styleOne, styleTwo]"> Array class</p>
  <input type="text" ng-model="styleOne" placeholder="escriba uno" />
  <input type="text" ng-model="styleTwo" placeholder="escriba dos" />
  <input type="text" ng-model="total" />
  <p ng-class="warningLevel()">Usando función</p>
</div>

CSS

.positivo,
.white {
  background-color: green;
  color: white;
}

.negativo,
.red {
  background-color: red;
  color: white;
}

.uno {
  color: blue;
}

.dos {
  font-weight: bold;
}

JavaScript

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

myApp.controller("FilterExampleController", function ($scope) {
  $scope.total = 30;
  $scope.warningLevel = function () {
    return $scope.total <= 0 ? "negativo" : "positivo";
  }
});