我有一个带分页的智能表。我有一个控制器,将 css 类应用于选定的行。所以问题是它将选择保留在其他页面的索引上,所以我正在寻找一种在使用或单击分页时清除类的方法。
这是表格:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="TestCtrl">
<div class="smart-table-container">
<table id="mytable" st-safe-src="dataSet" st-table="displayed" class="smart-table table">
<thead>
<tr >
<th >A COLUMN</th>
<th >A COLUMN</th>
<th >A COLUMN</th>
<th >A COLUMN</th>
<th >A COLUMN</th>
</tr>
</thead>
<tbody data-ng-dblclick="scrollTo()">
<tr data-ng-repeat="row in displayed" st-select-row="row" st-select-mode="single" data-ng-click="$parent.setClickedRow($index)" and data-ng-class="{'selected':$index == $parent.selectedRow}">
<td data-ng-click="$parent.selData(row);">{{$index}}</td>
<td data-ng-click="$parent.selData(row);">{{row.asd}}</td>
<td data-ng-click="$parent.selData(row);">{{row.dsa}}</td>
<td data-ng-click="$parent.selData(row);">{{row.qwe}}</td>
<td data-ng-click="$parent.selData(row);">{{row.ewq}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="text-center" st-pagination="" st-items-by-page="5" colspan="8">
</td>
</tr>
</tfoot>
</table>
</div>
</div>
这是与选择相关的代码:
angular.module('myApp', []);
function TestCtrl($scope) {
$scope.selectedRow = null;
$scope.displayed = [{asd:3},{asd:3},{asd:3},{asd:3},{asd:3},{asd:3}]
$scope.setClickedRow = function(index){
$scope.selectedRow = index;
}
}
和 css 类:
.selected {
background-color: #67BBED;
}