carloscarcamo/jsbin.jutan.html

## jsbin.jutan.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <meta charset="utf-8">
  <title>CSS Classes and Styles
</title>
  <style>
    .error{background-color:red;}
    .warning{background-color:yellow;}
    .selected{background-color:lightgreen
;}
  </style>
</head>
<body ng-app="stylesModule">
<div ng-controller='HeaderController'>
  <div ng-class='{error:isError, warning:isWarning}'>
    {{messageText}}
  </div>
<button ng-click='showError()'>Simulate Error</button>
<button ng-click='showWarning()'>Simulate Warning</button>
</div>
  <br><br>
<table ng-controller='RestaurantTableController'>
  <tr ng-repeat='restaurant in directory' ng-click='selectRestaurant($index)'
ng-class='{selected: $index==selectedRow}'>
    <td>{{restaurant.name}}</td>
    <td>{{restaurant.cuisine}}</td>
  </tr>
</table>


</body>
</html>

## jsbin.jutan.js
var stylesModule = angular.module('stylesModule', []);

stylesModule.controller('HeaderController', ['$scope',
  function($scope){
    $scope.isError = false;
    $scope.isWarning = false;

    $scope.showError = function(){
      $scope.messageText = "This is an error!";
      $scope.isError = true;
      $scope.isWarning = false;
    };

    $scope.showWarning = function(){
      $scope.messageText = "This is a warning!";
      $scope.isWarning = true;
      $scope.isError = false;
    };
  }
]);

stylesModule.controller('RestaurantTableController', ['$scope', function($scope){
  $scope.directory = [
    {name:'The Handsome Heifer',   cuisine:'BBQ'},
    {name:"Green's Green Greens", cuisine:'Salads'},
    {name:'House of Fine Fish', cuisine:'Seafood'}
  ];

  $scope.selectRestaurant = function(row){
    $scope.selectedRow = row;
  };
}]);
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
	<meta charset="utf-8">
	<title>CSS Classes and Styles
	</title>
	<style>
	.error{background-color:red;}
	.warning{background-color:yellow;}
	.selected{background-color:lightgreen
	;}
	</style>
	</head>
	<body ng-app="stylesModule">
	<div ng-controller='HeaderController'>
	<div ng-class='{error:isError, warning:isWarning}'>
	{{messageText}}
	</div>
	<button ng-click='showError()'>Simulate Error</button>
	<button ng-click='showWarning()'>Simulate Warning</button>
	</div>
	<br><br>
	<table ng-controller='RestaurantTableController'>
	<tr ng-repeat='restaurant in directory' ng-click='selectRestaurant($index)'
	ng-class='{selected: $index==selectedRow}'>
	<td>{{restaurant.name}}</td>
	<td>{{restaurant.cuisine}}</td>
	</tr>
	</table>


	</body>
	</html>
	var stylesModule = angular.module('stylesModule', []);

	stylesModule.controller('HeaderController', ['$scope',
	function($scope){
	$scope.isError = false;
	$scope.isWarning = false;

	$scope.showError = function(){
	$scope.messageText = "This is an error!";
	$scope.isError = true;
	$scope.isWarning = false;
	};

	$scope.showWarning = function(){
	$scope.messageText = "This is a warning!";
	$scope.isWarning = true;
	$scope.isError = false;
	};
	}
	]);

	stylesModule.controller('RestaurantTableController', ['$scope', function($scope){
	$scope.directory = [
	{name:'The Handsome Heifer', cuisine:'BBQ'},
	{name:"Green's Green Greens", cuisine:'Salads'},
	{name:'House of Fine Fish', cuisine:'Seafood'}
	];

	$scope.selectRestaurant = function(row){
	$scope.selectedRow = row;
	};
	}]);