ソートが効かない

Question

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が呼ばれています。

何故ソートできないのでしょうか？

どなたか教えてください。よろしくお願いします。

Comments

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

Answer 1

直接書いた時に正常動作しているのであれば、json読み込み時に生成されるソースコードが直接書いた場合と違う内容になっていると思われます。

ブラウザのデベロッパーツールを使うとjavascript動作後のhtmlのソースコードが確認できますので比較してみてください。

Comments

[chintao1224]

デベロッパーツール自体始めて聞きました。htmlは見えないと思っていたんですが、見えるんですね。いろいろ調べて見ます。それと仰られるようにjsonの読込を正常なコードを加工してjsonファイルから読み込むようにしたら上手くいきました。ありがとうございました。

Answer 2

jsonを読み込んだ結果を表示して確認してみましたか？
意図した（ソースコードに直接書き込んだ時と同じ）内容通りのデータとして読めているでしょうか？
そこを確認する所から始めれば解決の糸口になると思います。

Comments

[chintao1224]

正常に動作しているコード（直接データを埋め込んでいるコード）をjsonファイルにして読み込んで見たら上手くいきました。jsonって難しいんですね。勉強になりました。ありがとうございました。