JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyCtrl">
<button ng-click="deleteFromSomething()">Delete</button>
<button ng-click="AddSomething()">Add</button>
<ul>
<li ng-repeat="something in somethings | orderBy:['id2']"><span ng-class="zebrastripe($index)">{{something.id}}</span></li>
</ul>
</div>
</div>
CSS
.green {
color: green;
}
.red
{
color: red;
}
JavaScript
var myApp = angular.module('MyApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.somethings = [{"id":1,"id2":1},{"id":2,"id2":1},{"id":3,"id2":1},{"id":4,"id2":1}];
$scope.deleteFromSomething = function() {
$scope.somethings.splice(2,1);
}
$scope.counter = 1;
$scope.AddSomething = function() {
Math.floor(Math.random() * (100 - 1 + 1)) + 1; $scope.somethings.push({"id":Math.floor(Math.random() * (100 - 1 + 1)) + 1, "id2":$scope.counter});
$scope.counter++;
}
$scope.zebrastripe = function(idx) {
if((idx % 2) == 0) {
return 'green';
} else {
return 'red';
}
}
});