Question

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

目前点击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

Answer 1

每个引用相同的ng-class（$ scope.error）。您可以为每一行定义一个包含类的数组。

$scope.isGrey = [];

请参阅HTML中的特定类

<tr ng-repeat="student in students" ng-class="isGrey[$index]" ng-click="toggleClass()">

并将toggleClass更改为以下

$scope.toggleClass = function (id) {
    $scope.isGrey[id] = $scope.isGrey[id]=='error'?'':'error';
};

http://jsfiddle.net/hGE27/

Answer 2

你需要翻转isGrey的值：

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

Answer 3

这是因为每一行都建模为isGrey的同一个实例。

您需要做的是将每一行与其自己的isGrey值相关联。

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

您可以将tr标记更新为：

<tr ng-repeat="student in students" ng-class="{error : student.isGrey}"
    ng-click="toggleClass(student)">

并且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;
        }
    }
};

Answer 4

正如其他人所说，$ scope.isGrey的价值确实需要根据您的必要业务规则进行切换或设置。

话虽如此，根据您所描述的内容，您希望单独为每一行着色，在这种情况下，您需要将isGrey添加到包含数组的每个元素并切换其值。

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

和你的标记

<tr ng-repeat="student in students" ng-class="{error : student.isGrey}" ng-click="toggleClass(student)">

我希望这会对你有所帮助。

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

4 个答案: