CODEWITHSUNDEEP
angularjs
Rajeev
Rajeev

Reputation: 46969

Angularjs change background color

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

}

Upvotes: 0

Views: 616

Answers (1)

Kalhan.Toress
Kalhan.Toress

Reputation: 21901

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

Upvotes: 3

Related Questions