Angularjs change background color

Question

In the following code, on click of the td the color is changed for the td,but when someother td is clicked the old td color remains how to clear all td colors.I cannot use jquery or angular-jquery

<tr ng-repeat="r in myrows">
   <td style="width:100px;"><a href="javascript:void(0);" ng-click="getorder($event,r.id)" style="display:inline-block;">{{r.title}}</a></td
</tr>

$scope.getorder = function($event,release_id)
{
    console.log($event.currentTarget.parentNode);
    td = $event.currentTarget.parentNode;
    $event.currentTarget.parentNode.backgroundColor="red";

}

Hello :) could you explain more clearly what you are trying to achieve? Is it that when you click on first td it turns to a colour, and when you click on another td, it changes colour whie all other tds are back to white? — swlim
– swlim, Commented Mar 23, 2015 at 11:44
when i clieck on second td or third td...i want all other td to turn white — Rajeev
– Rajeev, Commented Mar 23, 2015 at 11:45

Kalhan · Accepted Answer · 2015-03-23 11:56:25Z

3

you can do it by in angular way by using ng-class or ng-style,

define scope variable in controller,

$scope.clickedElm = -1;

change the ng-click to

<a href="javascript:void(0);" ng-click="getorder($event,r.id); $parent.clickedElm = $index"...

and use ng-class in tag

<a href="javascript:void(0);" ng-click="getorder($event,r.id); $parent.clickedElm = $index" ng-class="{differentBg : ($index == $parent.clickedElm)}"...

Note : You need to call scope variable clickedElm by $parent.clickedElm because ng-repeat directive create a child scope in each and every iteration.

here is the sample demo

answered Mar 23, 2015 at 11:56

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Rajeev Over a year ago

what does $index do here

Rajeev Over a year ago

Also how to hightlight the first td by default?

Kalhan Over a year ago

its the index of ng-repeat in first repeat $index=0, in second repeat $index=1 likewise.. :)

Kalhan Over a year ago

change $scope.clickedElm = -1; to $scope.clickedElm = 0; :)

Rajeev Over a year ago

Also how to highlight td and not just the anchor tag

|

Collectives™ on Stack Overflow

Angularjs change background color

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related