這就是我如何使用orderBy Angularjs過濾器的列類別,反過來點擊。 「th」中的「a」標籤控制着行爲。我有一個指令,這是建議,但代碼可以在控制器中。
我使用Angularjs orderBy過濾器作爲它們的狀態。
$filter('orderBy')(array, expression, reverse)
// This is the order of properties in the code below that looks like this
// $scope.rows = angularSortBy($scope.rows, columnName, toggleOrderDirection(columnName));
每列有一個名爲
<i class="fa fa-sort"></i>
,其中,列會是這樣的一個字體真棒多箭頭切換...
$scope.columns = { columnOne: { label: 'Column One', orderDirection: true, selected: false },
columnTwo: { label: 'Column Two', orderDirection: true, selected: false },
columnThree: { label: 'Column Three', orderDirection: true, selected: true }};
和行可以是任何東西,你想...
<table>
<tr>
<th>Sort By</th>
<th ng-repeat="(key, value) in columns">
<a href="" ng-click="orderBy(key)">{{ value.label }}</a>
<span ng-if="value.selected">
(<i class="fa fa-sort"></i>) // font-awesome arrow font.
</th>
</tr>
<tr ng-repeat="row in rows">// stuff here</tr>
var angularSortBy = $filter('orderBy'); // use Angular's built in filter to sort table.
$scope.orderBy = function(columnName){
resetAllSelectedStates(); // sets column.selected prop to false.
setAsSelected(columnName, true);
$scope.rows = angularSortBy($scope.rows, columnName, toggleOrderDirection(columnName));
}
function resetAllSelectedStates(){
Object.keys($scope.columns).forEach(resetColumnPropertyToDefault);
}
function resetColumnPropertyToDefault(name){
$scope.columns[ name ].selected = false;
}
function setAsSelected(name){
$scope.columns[ name ].selected = true;
}
function toggleOrderDirection(name){
return $scope.columns[ name ].orderDirection = !$scope.columns[ name ].orderDirection;
}
您是否無法控制「原始數組」的排序?它是通過過濾器完成的嗎?您需要提供一些示例代碼,以便我們可以知道發生了什麼。 –
@Amine是的,我有一個過濾器,因爲我創建了表,以便我可以單擊每列的標題來更改排序。 – JFischer00
需要一些代碼來看看你是如何實現它。 – SoEzPz