Angular - changing color and text of a div on ng-click

Question

I am trying to change the color of a div on click of

ng-click

. I could make it work by changing the color, but now I need change the text of the div when the same is clicked, so per example I need change the color and replace the text inside per the one: clicked.

Any help? thank you.

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"  >

        {{item.id}}

        {{item.name}}

    </div>

</div>

JS:

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;

    }    



}

CSS:

.odd{

    background-color:white;  

}

.even{  

     background-color:grey;

}

.yellow{

     background-color:yellow;

}

jsfiddle: http://jsfiddle.net/HB7LU/26382/

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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>

Angular - changing color and text of a div on ng-click

Sign up