AngularJSでjsonを読み、テーブルに表示しています。テーブルのページングとソートをさせたいです。
ソートはテーブルのヘッダをクリックしてソートさせたいです。
以下のようなコードを書きました。
app.controller('MainCtrl',['$scope','$timeout','$http',function($scope,$timeout,$http){
$timeout(function(){
$http.get('data/sample.json')
.success(function(data){
$scope.values=data.list;
})
.error(function(err){
alert('読み込み失敗');
});
});
$scope.num=3; $scope.begin=0; $scope.onpaging=function(page){ $scope.begin=$scope.num*page; }; $scope.sortField=undefined; $scope.ascending=true; $scope.onsort=function(fieldName){ if($scope.sortField==fieldName){ $scope.ascending = !$scope.ascending; } else { $scope.sortField=fieldName; $scope.ascending=true; } };
}]);
<thead> <tr> <th ng-click="onsort('id')">ID</th> <th ng-click="onsort('name')">名前</th> </tr> </thead> <tbody> <tr ng-repeat="v in values | orderBy: ascending ? sortField:-sortField | limitTo:num:begin"> <td>{{v.id}}</td> <td>{{v.name}}</td> </tr> </tbody> <div> [<a href="#" ng-click="onpaging(0)">1</a>] [<a href="#" ng-click="onpaging(1)">2</a>] [<a href="#" ng-click="onpaging(2)">3</a>] [<a href="#" ng-click="onpaging(3)">4</a>] </div>このコードのjsファイルのjsonを読むところをデータをそのまま書いた場合($scope.valuesにそのままデータを書いた場合)はソートできます。でも上のようにjsonから読むようにした場合、テーブルのカラムをクリックしても何故かソートできません。visualstudioを使ってデバッグしたんですが、クリック時ちゃんとonsortが呼ばれています。
何故ソートできないのでしょうか?
どなたか教えてください。よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー