gpt4 book ai didi

javascript - 带有 ng-repeat 的 Angular 切换表行 ng-class

转载 作者:数据小太阳 更新时间:2023-10-29 05:48:09 25 4
gpt4 key购买 nike

这似乎不适合我。我在 tr 上有一个 ng-repeatng-clickng-class。单击 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

最佳答案

Every 指的是同一个 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/

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com