,可以通过以下步骤实现:
<table ng-table="tableParams" class="table">
<tr ng-repeat="item in $data">
<td data-title="'Name'">{{item.name}}</td>
<td data-title="'Age'">{{item.age}}</td>
<td data-title="'Email'">{{item.email}}</td>
</tr>
</table>
app.controller('MyController', function($scope, NgTableParams) {
$scope.data = [
{name: 'John', age: 25, email: 'john@example.com'},
{name: 'Jane', age: 30, email: 'jane@example.com'},
{name: 'Bob', age: 35, email: 'bob@example.com'}
];
$scope.tableParams = new NgTableParams({}, {dataset: $scope.data});
});
orderBy
过滤器来实现排序。修改HTML文件如下:<table ng-table="tableParams" class="table">
<tr>
<th sortable="'name'" data-title="'Name'">
<a href="" ng-click="tableParams.sorting({name: 'asc'})">Name</a>
</th>
<th sortable="'age'" data-title="'Age'">
<a href="" ng-click="tableParams.sorting({age: 'asc'})">Age</a>
</th>
<th sortable="'email'" data-title="'Email'">
<a href="" ng-click="tableParams.sorting({email: 'asc'})">Email</a>
</th>
</tr>
<tr ng-repeat="item in $data">
<td data-title="'Name'">{{item.name}}</td>
<td data-title="'Age'">{{item.age}}</td>
<td data-title="'Email'">{{item.email}}</td>
</tr>
</table>
在上述代码中,我们在表头的每个列定义中添加了一个排序按钮,并使用ng-click
指令调用tableParams.sorting()
方法来实现排序。sortable
属性指定了要排序的字段。
通过以上步骤,我们就可以在AngularJS中使用Ng表对自定义模板进行排序了。
关于Ng表的更多详细信息和使用方法,可以参考腾讯云的相关产品和文档:
领取专属 10元无门槛券
手把手带您无忧上云