具有ng-repeat的角度切换表行ng-class

This seems not to be working for me. I've a ng-repeat,ng-click and ng-class on the tr. Clicking on the tr should toggle the class to .error.

这似乎不适合我。我在tr上有一个ng-repeat,ng-click和ng-class。单击tr应该将类切换为.error。

Currently clicking a tr will change the class of all the table rows.

当前单击tr将更改所有表行的类。

<!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>

JSFiddle

4 个解决方案

#1

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';
};

http://jsfiddle.net/hGE27/

#2

You need to flip the value of isGrey:

你需要翻转isGrey的值:

$scope.toggleClass = function () {
    $scope.isGrey = !$scope.isGrey;
};

#3

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 students object with a new property called isGrey as follows:

这意味着您需要使用名为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 tr tag 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;
        }
    }
};

#4

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.

我希望这可以帮助你。

#1