allenyang79/jsbin.aNUMANi.css

## jsbin.aNUMANi.css
.error{
  color:#f00;
}
.warning{
  color:#0f0;
}
.highlight{
  background:#efefef;
}

## jsbin.aNUMANi.html
<html = ng-app="app">
<body ng-controller="MyCtrl">
<div>
  <ul>
    <li ng-repeat="item in items" ng-class="{highlight: $index % 4 ==0}">
      {{$index}}
      show:<input type="checkbox" ng-model="item.show"/><br/>
      error:<input type="checkbox" ng-model="item.isError"/><br/>
      warning:<input type="checkbox" ng-model="item.isWarning"/><br/>
      <span ng-class="{error: item.isError, warning: item.isWarning}">{{item.name}}</span><br/>
      <img ng-src="{{item.img}}" ng-show="item.show"/>
      {{item.isWarning}}
    </li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
</body>
</html>

## jsbin.aNUMANi.js
var app = angular.module('app',[]);

app.controller('MyCtrl', function($scope){
  $scope.items=[];
  $scope.items.push({
    show:true,
    name:"bill",
    img:'http://www.placehold.it/50x50'
  });
  $scope.items.push({
    show:true,
    name:"merry",
    img:'http://www.placehold.it/50x50'
  });
  $scope.items.push({
    show:true,
    name:"joe",
    img:'http://www.placehold.it/50x50'
  });
  $scope.items.push({
    show:true,
    name:"brown",
    img:'http://www.placehold.it/50x50'
  });
});
	.error{
	color:#f00;
	}
	.warning{
	color:#0f0;
	}
	.highlight{
	background:#efefef;
	}
	<html = ng-app="app">
	<body ng-controller="MyCtrl">
	<div>
	<ul>
	<li ng-repeat="item in items" ng-class="{highlight: $index % 4 ==0}">
	{{$index}}
	show:<input type="checkbox" ng-model="item.show"/><br/>
	error:<input type="checkbox" ng-model="item.isError"/><br/>
	warning:<input type="checkbox" ng-model="item.isWarning"/><br/>
	<span ng-class="{error: item.isError, warning: item.isWarning}">{{item.name}}</span><br/>
	<img ng-src="{{item.img}}" ng-show="item.show"/>
	{{item.isWarning}}
	</li>
	</ul>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
	</body>
	</html>
	var app = angular.module('app',[]);

	app.controller('MyCtrl', function($scope){
	$scope.items=[];
	$scope.items.push({
	show:true,
	name:"bill",
	img:'http://www.placehold.it/50x50'
	});
	$scope.items.push({
	show:true,
	name:"merry",
	img:'http://www.placehold.it/50x50'
	});
	$scope.items.push({
	show:true,
	name:"joe",
	img:'http://www.placehold.it/50x50'
	});
	$scope.items.push({
	show:true,
	name:"brown",
	img:'http://www.placehold.it/50x50'
	});
	});