質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2845閲覧

テーブルの全件ソートとページング

chintao1224

総合スコア155

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/05/21 14:46

編集2016/05/23 01:08

先日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"> の切り替えを試したのですが上手くいきませんでした。

先にソートを走らせて、その後でページングなんてことは出来ないのでしょうか?

どうすれば良いのかご教示をお願いします。

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ng-repeat の orderBy を少し修正すると動きます。

HTML

1<tbody> 2 <tr ng-repeat="v in values | orderBy: sortField: !ascending | limitTo:num:begin"> 3 <td>{{v.id}}</td> 4 <td>{{v.name}}</td> 5 </tr> 6</tbody>

ご参考になれば。

投稿2016/05/23 03:24

tkanda

総合スコア2425

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chintao1224

2016/05/23 23:00

なるほど。-sortFieldがマズかったんですね。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問