Question

我想问一下，如何在Angularjs中更改div中单击项目的颜色：

<div ng-repeat="answers in answer track by $index" 
ng-click="addToAnswers(currentPage,$index)">{{answers}}</div>

这是测验答案。像这里：a link “jquery点击切换”，但我不想使用jquery。

Answer 1

首先请将answers in answer更改为answer in answers。您可以在isChecked

的每个element上拥有answers属性

<div ng-repeat="answer in answers track by $index" 
   ng-class="answer.isChecked? 'red': 'green'"
   ng-click="addToAnswers(currentPage,$index);answer.isChecked != answer.isChecked">
   {{answer}}
</div>

Selected Answers{{ answers | filter: {isChecked: true}}}

<强> CSS

.red {
   background-color: red;
}

.green {
   background-color: green;
}

Answer 2

只需使用ng-class。

在ng-click函数中，您需要将范围＆lt; clicked变量设置为true。这样，您可以在点击红色类时显示红色类，否则显示绿色类。

$scope.clicked = false;
$scope.addToAnswers = function(page, index) {
    page.clicked = true;
});

<div ng-repeat="answers in answer track by $index" 
ng-click="addToAnswers(currentPage,$index)"
ng-class="{'back-red': currentPage.clicked, 'back-green': !currentPage.clicked}">{{answers}}</div>

.back-red { background-color: red; }

Angularjs，如何改变div中多个项目的颜色

2 个答案: