[英]AngularJS orderBy Function With No Sorting
我試圖使用自定義orderBy函數。 最初,我希望數據按照添加到$scope.rows
的順序顯示,並且只有在單擊列標題后才能按特定屬性進行排序。 這是我的小提琴:
這是我的觀點:
<table ng-app ng-controller="ctrl">
<tr>
<th><a ng-click="orderBy = 'id'">ID</a></th>
<th><a ng-click="orderBy = 'name'">Name</a></th>
</tr>
<tr ng-repeat="row in rows | orderBy:mySort">
<td>{{row.object.id}}</td>
<td>{{row.object.name}}</td>
</tr>
</table>
這是我的控制器:
function ctrl($scope)
{
// Initially, we don't sort by anything
$scope.orderBy = "";
$scope.rows = [];
// Add some rows
for(var i = 10;i < 30;i++)
{
$scope.rows.push({settings: {foo: true}, object: {id: i, name: "Name " + i}})
};
$scope.mySort = function(row)
{
if($scope.orderBy != "")
{
return row.object[$scope.orderBy];
}
// What do I return here??
return "";
}
}
如果$scope.orderBy
未設置且我想以原始順序返回$scope.rows
,那么我在$scope.mySort
返回什么? 我無法return row.object.id
因為無法保證按行ID順序添加行。 在Chrome 32上按原樣運行我的代碼,出現的第一行ID為20,即中間行。
我認為你必須編寫自己的sortby
函數。 原始angulars orderBy
是一個返回排序數組的常規過濾器。 您的過濾器可能如下所示:
.filter('mySort', function(){
return function(values, param){
if(param===''){
return values;
}else{
// very important! create a copy of the array - otherwise
// the $wtachCollection function will fire to often!
var arrayCopy = [];
for ( var i = 0; i < values.length; i++) { arrayCopy.push(values[i]); }
return arrayCopy.sort(function(a,b){
var v1 = a.object[param];
var v2 = b.object[param];
// you know best how to sort it!
if (v1 === v2) return 0;
return v1 < v2 ? -1 : 1;
});
}
}
})
您可以通過以下方式使用此過濾器:
<table ng-app="myApp" ng-controller="ctrl">
<tr>
<th><a ng-click="orderBy = 'id'">ID</a></th>
<th><a ng-click="orderBy = 'name'">Name</a></th>
</tr>
<tr ng-repeat="row in rows | mySort:orderBy">
<td>{{row.object.id}}</td>
<td>{{row.object.name}}</td>
</tr>
</table>
這是你修改過的小提琴: http : //jsfiddle.net/spRf6/我已經改變了一些名字,所以你可能會看到排序有效。
創建一個對象數組的副本,然后排序變得微不足道:
控制器:
$scope.objects = [];
angular.forEach($scope.rows, function(row){
$scope.objects.push(row.object);
});
視圖:
<tr ng-repeat="object in objects | orderBy:orderBy">
<td>{{object.id}}</td>
<td>{{object.name}}</td>
</tr>
不需要mySort功能。
return $scope.rows.indexOf(row);
( 小提琴。 )
您也可以使用開箱即用的orderBy
執行此操作,方法是提供一個函數,將其作為默認謂詞返回:
控制器:
$scope.mySort = $scope.unsorted = function(row)
{
return $scope.rows.indexOf(row);
}
視圖:
<div ng-app ng-controller="ctrl">
<table>
<tr>
<th><a ng-click="mySort = 'object.id'">ID</a></th>
<th><a ng-click="mySort = 'object.name'">Name</a></th>
</tr>
<tr ng-repeat="row in rows | orderBy:mySort">
<td>{{row.object.id}}</td>
<td>{{row.object.name}}</td>
</tr>
</table>
<button ng-click="mySort = unsorted;">Original Sort</button>
</div>
在這里小提琴 (我已經更改了對象中使用的數字,以便按ID排序,按名稱排序,原始排序不完全相同。)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.