I am trying to change the color of a div on click of
ng-click
<div ng-controller="MyCtrl">
Hello, {{name}}!
<div ng-init="item.isyellow = false" ng-repeat="item in realName" ng-class="{yellow : $index == row}" ng-class-odd="'odd'" ng-class-even="'even'" ng-click="colorRow($index)" style="cursor:pointer" >
{{item.id}}
{{item.name}}
</div>
</div>
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.colorRow = function(index){
$scope.row = index;
}
}
.odd{
background-color:white;
}
.even{
background-color:grey;
}
.yellow{
background-color:yellow;
}
A variant of @user3249448's ans. It might be what you are looking for
Look at JsFiddle
JS:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.row = -1;
$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.colorRow = function(index){
$scope.row = index;
}
}
HTML:
<div ng-controller="MyCtrl">
Hello, {{name}}!
<div ng-init="item.isyellow = false" ng-repeat="item in realName" ng-class="{yellow : $index == row}" ng-class-odd="'odd'" ng-class-even="'even'" ng-click="colorRow($index)" style="cursor:pointer" >
<span ng-show="$index != row ">{{item.id}}
{{item.name}}</span>
<span ng-show="$index == row"> : Cliked</span>
</div>
</div>