var app = angular.module('testApp', []);
app.controller('MyController', ['$scope', function($scope) {
$scope.id_sort_flag = true;
$scope.price_sort_flag = true;
$scope.date_sort_flag = true;
$scope.items = [
{
id: '1',
name: 'AAA',
price: 2150,
date: new Date(2015, 7, 10)
},
{
id: '2',
name: 'BBB',
price: 2000,
date: new Date(2015, 6, 20)
}
];
$scope.sort_type = 'id';
$scope.sort = function( type ){
console.log("type:"+type);
switch( type )
{
case 0:
$scope.id_sort_flag = $scope.id_sort_flag?false:true;
$scope.sort_flag = $scope.id_sort_flag;
$scope.sort_type = 'id';
break;
case 1:
console.log("price_sort_flag:"+$scope.price_sort_flag);
$scope.price_sort_flag = $scope.price_sort_flag?false:true;
$scope.sort_flag = $scope.price_sort_flag;
$scope.sort_type = 'price';
break;
case 2:
$scope.date_sort_flag = $scope.date_sort_flag?false:true;
$scope.sort_flag = $scope.date_sort_flag;
$scope.sort_type = 'name';
break;
}
}
}]);
<div ng-app="testApp" ng-controller="MyController">
<table class="table">
<tr>
<th ng-click="sort(0)">ID</th>
<th>商品名</th>
<th ng-click="sort(1)">価格</th>
<th ng-click="sort(2)">入荷日</th>
</tr>
<tr ng-repeat="item in items | orderBy: sort_type:sort_flag">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.date | date}}</td>
</tr>
</table>
</div>
External resources loaded into this fiddle: