Question

我有这段代码

<body>
<table border = 1>
        <tr>
            <td>Art</td>
            <td ng-repeat="x in books0" ng-click="clicked(0, x.name)">{{x.name}}</td>
        </tr>
        <tr>
            <td>Science</td>
            <td ng-repeat="x in books1" ng-click="clicked(1, x.name)">{{x.name}}</td>
        </tr>
        <tr>
            <td>Sport</td>
            <td ng-repeat="x in books2" ng-click="clicked(2, x.name)">{{x.name}}</td>
        </tr>
        <tr>
            <td>Literature</td>
            <td ng-repeat="x in books3" ng-click="clicked(3, x.name)">{{x.name}}</td>
        </tr>
    </table><br>
    <input type = "button" value = "logout" ng-click="logout()">
</body>

如果已使用角度js检出书籍，我想将单元格的颜色更改为红色。我该如何改变颜色？

Answer 1

你可以使用ng-class并重构你的功能。

ng-class="{true: 'redColorClass', false:''}[x.isClicked === true]"

并在您的控制器中

$scope.clicked = function(the_number, x) {
   x.isClicked = x.isClicked == true? false:true;
   // and the rest of your code then.
}

并将点击更改为您的html到click(the_number, x)

所以你把整本书对象都给你的功能。

这样每次触发click功能时，都会将属性isClicked从true切换为false，反之亦然。如果为true，则该元素将获取redColorClass，它是您在.css文件中定义的类，并且可以根据需要进行操作，例如： color:red

此外，您的ng-repeat不是最佳选择。尽量避免许多重复次数，也许你可以用另一种方式。

angularJS改变桌子上的细胞颜色（用ng-repeat制作）

1 个答案: