Angular: Empty Fiddle

http://angularjs.org/

by Edgar Martinez

HTML

<div ng-controller="MyCtrl">
  Hello, {{name}}!
    
    <div class="my-div" ng-repeat="item in realName" ng-click="doChangeBg(item)" ng-class="{'selectedStyle': activeItem === item.id}">
        {{item.id}}
        {{item.name}}
    </div>
</div>

CSS

.my-div {
    cursor: pointer;
}
.oddStyle {
    background-color: white;
    color: black;
}
.evenStyle {
    background-color: black;
    color: white;
}
.selectedStyle {
    /* don't use important! :) - just for example simplicity */
  background-color: yellow !important;
  color: black !important;
}
}

JavaScript

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.realName=[{"id":1,"name":"A"},{"id":2,"name":"B"},{"id":3,"name":"c"},{"id":4,"name":"D"},{"id":5,"name":"E"},{"id":6,"name":"F"}];
    $scope.activeItem = null;
    
    $scope.doChangeBg = function (item) {
		$scope.activeItem = item.id;
    };
}