这似乎对我不起作用。我在ng-repeat上有一个ng-clickng-classtr。单击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

最佳答案

每个都引用相同的ng类($ 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/

关于javascript - Angular 切换表行ng-repeat ng-class,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/22685730/

10-11 22:12
查看更多