Question

在下面的代码中，单击td时，td的颜色会发生变化，但是当点击其他td时，旧的td颜色仍然是如何清除所有td颜色。我不能使用jquery或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";

}

Answer 1

您可以使用ng-class或ng-style，

以有角度的方式完成此操作

在控制器中定义范围变量，

$scope.clickedElm = -1;

将ng-click更改为

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

并在标记

中使用ng-class

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

注意：您需要通过clickedElm调用范围变量$parent.clickedElm，因为ng-repeat指令会在每次迭代中创建子范围。

这是sample demo

Angularjs改变背景颜色

1 个答案: