AngularJS tablo sütun sıralama kodu kullanım örneği (AngularJS table column sorting code usage example)

AngularJS ile HTML tablosuna verilerinizi yerleştirdikten sonra her bir sütun için verileri sıralama gereksinimi duyduğunuzda işleminizi aşağıdaki kod bloklarında olduğu gibi ng-repeat içine orderBy özelliğinide ekleyerek yapabilirsiniz.

//table sort
$scope.policiesSortPredicate = "name";
$scope.policiesSortReverse = false;

$scope.sortPolicyTable = function(predicate) {
	$scope.customersSortPredicate = predicate;
	$scope.customersSortReverse = !$scope.customersSortReverse;
};

//table sort icon class
$scope.getSortedColumnIcon = function(columnName) {
	if(columnName == $scope.policiesSortPredicate && $scope.policiesSortReverse == false) {
		return "downIconFromIconSet";
	}
	else if (columnName == $scope.policiesSortPredicate && $scope.policiesSortReverse == true) {
		return "upIconFromIconSet";
	}
	else {
		return "minusIconFromIconSet";
	}
};
<thead>
	<th style="cursor: pointer" ng-click="sortCustomerTable('name')">
		<div style="float: left">Ad</div>
		<div style="float: right">
			<i ng-class="getSortedColumnIcon('name')"></i>
		</div>
	</th>
	<th style="cursor: pointer" ng-click="sortPolicyTable('surname')">
		<div style="float: left">Soyadı</div>
		<div style="float: right">
			<i ng-class="getSortedColumnIcon('surname')"></i>
		</div>
	</th>

</thead>
<tbody>
	<tr ng-repeat="custom in customers | orderBy:customersSortPredicate:customersSortReverse | filter : customerSearchFilter track by $index">
		<td>{{customer.name}}</td>
		<td>{{customer.surname}}</td>
	</tr>
</tbody>
Share on Facebook0Tweet about this on TwitterShare on Google+0Share on StumbleUpon0Share on Reddit0

Leave a Reply


*