javascript 带有 ng-repeat 的角度切换表行 ng-class
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22685730/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular toggle table row ng-class with ng-repeat
提问by Mahesh Sapkal
This seems not to be working for me. I've a ng-repeat,ng-clickand ng-classon the tr. Clicking on the tr should toggle the class to .error.
这似乎对我不起作用。我有一个ng-repeat，ng-click并且ng-class在tr. 单击 tr 应将类切换为.error.
Currently clicking a trwill change the class of all the table rows.
当前单击 atr将更改所有表行的类。
<!doctype html>
<html lang="en" ng-app="studentApp">
<head>
<meta charset="UTF-8">
<style>
.is-grey-true { background-color: #ccc; }
.error { background-color: red; }
</style>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body ng-controller="StudentController">
<table ng-hide="showTable">
<tr ng-repeat="student in students" ng-class="{error : isGrey}" ng-click="toggleClass()">
<td>{{student.id}}</td>
<td>{{student.firstname}}</td>
<td>{{student.lastname}}</td>
</tr>
</table>
<script type="text/javascript">
var studentApp = angular.module('studentApp',[]);
studentApp.controller('StudentController', function($scope){
var students = [
{ id:1, firstname: 'Mahesh', lastname: 'Sapkal'},
{ id:2, firstname: 'Hardik', lastname: 'Joshi'},
{ id:3, firstname: 'Sagar', lastname: 'Mhatre'}
];
$scope.isGrey = false;
$scope.toggleClass = function () {
$scope.isGrey = true;
};
});
</script>
</body>
</html>
回答by John Smith
Every refers to the same ng-class ($scope.error). You could define an array that contais the class for every row.
Every 指的是同一个 ng-class ($scope.error)。您可以定义一个包含每一行类的数组。
$scope.isGrey = [];
Refer to the specific class like this in HTML
在 HTML 中像这样引用特定的类
<tr ng-repeat="student in students" ng-class="isGrey[$index]" ng-click="toggleClass()">
and change the toggleClass to the following
并将toggleClass更改为以下内容
$scope.toggleClass = function (id) {
$scope.isGrey[id] = $scope.isGrey[id]=='error'?'':'error';
};
回答by Dunken
You need to flip the value of isGrey:
您需要翻转 isGrey 的值：
$scope.toggleClass = function () {
$scope.isGrey = !$scope.isGrey;
};
回答by callmekatootie
That is because each row is modeled to the same instance of isGrey.
这是因为每一行都被建模为isGrey.
What you need to do is associate each row with its own value of isGrey.
您需要做的是将每一行与其自身的 值相关联isGrey。
This means that you need to update the studentsobject with a new property called isGreyas follows:
这意味着您需要students使用isGrey如下所示的新属性更新对象：
$scope.students = [
{ id:1, firstname: 'Mahesh', lastname: 'Sapkal', isGrey: false},
{ id:2, firstname: 'Hardik', lastname: 'Joshi', isGrey: false},
{ id:3, firstname: 'Sagar', lastname: 'Mhatre', isGrey: false}
];
You can the update the trtag as:
您可以将tr标签更新为：
<tr ng-repeat="student in students" ng-class="{error : student.isGrey}"
ng-click="toggleClass(student)">
and for the code for the toggleClass()function to be:
并且toggleClass()函数的代码是：
$scope.toggleClass = function (student) {
for (var i = 0; i < $scope.students.length; i++) {
if ($scope.students[i].id === student.id) {
$scope.students[i].isGrey = true;
break;
}
}
};
回答by Brocco
As someone else has stated, the value of $scope.isGrey does need to be toggled or set based upon your necessary business rules.
正如其他人所说， $scope.isGrey 的值确实需要根据您必要的业务规则进行切换或设置。
That being said, based upon what you've described you want to color each row individually in which case you need to add isGrey to each element withing your array and toggle its value.
话虽如此，根据您所描述的内容，您希望单独为每一行着色，在这种情况下，您需要将 isGrey 添加到数组中的每个元素并切换其值。
$scope.toggleClass = function(student){ student.isGrey = !student.isGrey; }
and in your markup
并在您的标记中
<tr ng-repeat="student in students" ng-class="{error : student.isGrey}" ng-click="toggleClass(student)">
I hope this helps you.
我希望这可以帮助你。
