ng-class 在表的第一行有类并在 ng-click 上将其删除
Posted
技术标签:
【中文标题】ng-class 在表的第一行有类并在 ng-click 上将其删除【英文标题】：ng-class have class on first row of table and remove it on ng-click 【发布时间】：2017-12-22 06:01:02 【问题描述】：我正在使用 Angular js 来显示一个表格。当页面加载时，我希望表格的第一行突出显示，然后当您单击表格的另一行时，我想删除突出显示的类。
我已经设法让它使用
在第一行添加类 ng-class="'selected-row':$first"
但是我无法删除它。我希望能够像这样从 $scope 传递一个变量，这样我就可以在点击时更改值...
控制器....
$scope.changeClass = function()
if ($scope.myClass === "selected-row")
$scope.myClass = "off";
window.alert('change class here to remove highlight!!!');
else
$scope.myClass = "selected-row";
window.alert('change it back!!');
html....
<tr ng-repeat="row in $data" ng-click="changeClass()" ng-class="myClass:$first">
这不起作用，我无法弄清楚语法（如果可能的话！！）有什么想法吗？
Plunker：https://plnkr.co/edit/Zs1r6DQcc3vaUDjzkUh8?p=preview
【问题讨论】：
【参考方案1】：您可以使用ng-class 和一个跟踪行索引的数组来实现此目的
// Code goes here
var app = angular.module('ngTableApp', ['ngTable'])
.controller('selectFilterController', function($scope, $filter, $q, NgTableParams)
var data = [name: "Moroni", age: 50,
name: "Tiancum", age: 43,
name: "Jacob", age: 27,
name: "Nephi", age: 29,
name: "Enos", age: 34,
name: "Tiancum", age: 43,
name: "Jacob", age: 27,
name: "Nephi", age: 29,
name: "Enos", age: 34,
name: "Tiancum", age: 43,
name: "Jacob", age: 27,
name: "Nephi", age: 29,
name: "Enos", age: 34,
name: "Tiancum", age: 43,
name: "Jacob", age: 27,
name: "Nephi", age: 29,
name: "Enos", age: 34
];
$scope.class = "selected-row";
$scope.changeClass = function(index)
$scope.selected=[];
$scope.selected[index]=true;
;
$scope.changeClass(0);
$scope.names = [id: "", title: "", id: 'Moroni', title: 'Moroni', id: 'Enos', title: 'Enos', id: 'Nephi', title: 'Nephi'];
$scope.tableParams = new NgTableParams(page: 1, count: 10, data: data);
)/* Styles go here */
.selected-row
border:solid purple 3px;
.off
border:none;
.table-striped > tbody > tr:hover
border:solid purple 3px;
.table-striped > tbody > tr:active
border:solid purple 3px;
.table-striped > tbody > tr:focus
border:solid purple 3px;
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.7" data-semver="1.3.7" src="https://code.angularjs.org/1.3.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="ngTableApp">
<h1>NgTable with select filters</h1>
<div ng-controller="selectFilterController">
<table ng-table="tableParams" class="table table-striped ng-scope ng-table" show-filter="true">
<tbody>
<tr ng-repeat="row in $data" ng-click="changeClass($index)" ng-class="'selected-row':selected[$index]">
<!--<tr ng-repeat="row in $data" ng-click="changeClass()" ng-class="myClass:$first"> -->
<td data-title="'Name'" filter="name: 'select'" filter-data="names" sortable="'name'"> row.name </td>
<td data-title="'Age'" filter="age: 'text'" sortable="'age'"> row.age </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>【讨论】：
【参考方案2】：我已调整您的 ng-repeat 以按 $index 跟踪每个项目。首先，我们将使用以下行将活动行索引设置为 0：
$scope.activeRow = 0
然后在一行的点击事件中，我们将活动行设置为当前点击的行：
$scope.setActive = (index) =>
$scope.activeRow = index;
然后要查看需要突出显示的行，在您的 ng-class 中调用以下函数会发生奇迹：
$scope.isActive = (index) =>
return $scope.activeRow === index;
工作人员：https://plnkr.co/edit/OMpcDg5V8TVHkxHUIXUQ?p=preview
【讨论】：
以上是关于ng-class 在表的第一行有类并在 ng-click 上将其删除的主要内容，如果未能解决你的问题，请参考以下文章