先日AngularJSでテーブルのソートとページングで質問してたものです。
テストをしててソートが思ったとおりに行ってなくて悩んでいます。
コードを見てて当然かと思ったんですが、どうすれば良いのか判りません。
やりたいことは、AngularJSでテーブルの全件でのソート、ページングです。
以下のコードでは、表示されている件数3件でのソートになります。
onsortが効くとき、limitToが効いてしまうためだと思いました。
onpagingが効くとき、orderByが効いてしまうためだと思いました。
AngularJS
1app.controller('MainCtrl',['$scope','$timeout','$http',function($scope,$timeout,$http){ 2 $timeout(function(){ 3 $http.get('data/sample.json') 4 .success(function(data){ 5 $scope.values=data.list; 6 }) 7 .error(function(err){ 8 alert('読み込み失敗'); 9 }); 10 }); 11 12 $scope.num=3; 13 $scope.begin=0; 14 $scope.onpaging=function(page){ 15 $scope.begin=$scope.num*page; 16 }; 17 18 $scope.sortField=undefined; 19 $scope.ascending=true; 20 $scope.onsort=function(fieldName){ 21 if($scope.sortField==fieldName){ 22 $scope.ascending = !$scope.ascending; 23 } else { 24 $scope.sortField=fieldName; 25 $scope.ascending=true; 26 } 27 }; 28 }]);
HTML
1<thead> 2 <tr> 3 <th ng-click="onsort('id')">ID</th> 4 <th ng-click="onsort('name')">名前</th> 5 </tr> 6 </thead> 7 <tbody> 8 <tr ng-repeat="v in values | orderBy: ascending ? sortField:-sortField | limitTo:num:begin"> 9 <td>{{v.id}}</td> 10 <td>{{v.name}}</td> 11 </tr> 12 </tbody> 13 14<div> 15 [<a href="#" ng-click="onpaging(0)">1</a>] 16 [<a href="#" ng-click="onpaging(1)">2</a>] 17 [<a href="#" ng-click="onpaging(2)">3</a>] 18 [<a href="#" ng-click="onpaging(3)">4</a>] 19 </div>
tbodyでng-showを使って
<tr ng-repeat="v in values | orderBy: ascending ? sortField:-sortField"> と <tr ng-repeat="v in values | limitTo:num:begin"> の切り替えを試したのですが上手くいきませんでした。先にソートを走らせて、その後でページングなんてことは出来ないのでしょうか?
どうすれば良いのかご教示をお願いします。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/05/23 23:00