angular test fiddle

testing angular app

by mkdizajn

HTML

<div ng-app="myApp">

<div ng-controller="myCtrl">
		<ul>
			<li class="{{item.class}}" ng-repeat="item in items">{{item.value}}</li>
		</ul>

		<ul>
			<li class="{{item.class}}" ng-repeat="item in items">{{item.value}}</li>
		</ul>
		
		<ul>
			<li ng-class="{'good': item.class==='good', 'warning': item.class==='warning', 'danger': item.class==='danger'}" ng-repeat="item in items">{{item.value}}</li>
		</ul>
    </div>
    </div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>

body {
	background: #333;
	color: white;
}

ul {
	display: inline-block;
}

.good {
	color: limegreen;
}

.warning {
	color: yellow;
}

.danger {
	color: red;
}

JavaScript

angular.module('myApp', [])
	.controller('myCtrl', [
	'$scope',
	'$interval',
	function($scope, $interval) {
		var values = ['Hello', 'Oops', 'Uh-Oh...'];
		var classes = ['good', 'warning', 'danger'];
		var nItems = 8;
		$scope.items = [];

		for(var i=0; i < nItems; i++){
			$scope.items.push({});
		}

		function updateItems() {
			for(var i=0; i < $scope.items.length; i++){
				var item = $scope.items[i];
				var chosen = Math.floor(Math.random()*values.length);
				item.value = values[chosen];
				item.class = classes[chosen];
			}
		}

		$scope.getItemValue = function(item){
			return item.value; 
		};

		$interval(updateItems, 3000);
	}]);