问问题
49 次
2 回答
2
这其实很简单，试试：
html：
<body ng-controller="AppCtrl">
Sort by: <select ng-model="sortField" ng-options="o.label for o in fields"></select>
<label>
<input type="checkbox" ng-model="inverse"> inverse
</label>
<hr>
<table>
<tr data-ng-repeat="row in grid.data|orderBy:sortField.key:inverse">
<td>{{row.id}}</td>
<td>{{row.number}}</td>
<td>{{row.text}}</td>
</tr>
</table>
</body>
js：
app.controller('AppCtrl', ['$scope', function($scope) {
$scope.fields = [
{ label: 'ID', key: 'id' },
{ label: 'Nr.', key: 'number' },
{ label: 'Text', key: 'text' }
];
$scope.sortField = $scope.fields[2];
$scope.inverse = false;
$scope.grid = {
data: [
{ id: 1, number: 4, text: 'A' },
{ id: 2, number: 3, text: 'E' },
{ id: 3, number: 2, text: 'B' },
{ id: 4, number: 1, text: 'D' },
{ id: 5, number: 0, text: 'C' }
]
};
}]);
演示：http: //jsbin.com/ezadat/1/
于 2013-08-13T09:34:04.257 回答
1
首先为您的订单方向定义范围变量并通过特殊功能访问数据数组：
<div ng-app ng-controller="Ctr">
<select ng-model="orderBy">
<option>Id</option>
<option>Name</option>
</select>
<ul data-ng-repeat="row in orderData(orderBy)">
<li>{{row.Id}}: {{row.Name}}</li>
</ul>
</div>
示例控制器如下所示：
function Ctr($scope) {
// Get your data:
// (think it can be hidden in context as local variable to not to expose in
// outside because you'll access the data via special function)
var data = [
{Id: 1, Name: 'C'},
{Id: 2, Name: 'B'},
{Id: 3, Name: 'A'}
];
// Set default ordering field
$scope.orderBy = 'Id';
// Ordering function accessed from UI
$scope.orderData = function(orderBy) {
return data.sort(function(a, b) {
var valueA = a[orderBy];
var valueB = b[orderBy];
return (valueA < valueB) ? -1 : (valueA > valueB) ? 1 : 0;
});
};
}
orderedData并在控制器的功能中订购您的数据。
于 2013-08-13T09:12:56.227 回答