Angular.jsでページレイアウト/テーブルレイアウトを達成するには？

Question

オブジェクトが15個以上あるオブジェクトリテラルを受け取って、素敵なレイアウト（すべてではない）で表示する必要があるとしましょう。

今、私はテーブルの行にng-repeatを使用しています。その結果、1つの列を持つ細い表が長くなります。

説明を明確にするために編集します。オブジェクト/より多くのパラメータ内にオブジェクトを持つことができます。

$scope.zones = [ 
     {"name": "Zone 1", 
     "activity": "1"}, 
     {"name": "Zone 2", 
     "activity": "1"}, 
     {"name": "Zone 3", 
     "activity": "0"}, 
     {"name": "Zone 4", 
     "activity": "0"}, 
     {"name": "Zone 5", 
     "activity": "0"}, 
     {"name": "Zone 6", 
     "activity": "0"}, 
     {"name": "Zone 7", 
     "activity": "1"}, 
     {"name": "Zone 8", 
     "activity": "0"}, 
     {"name": "Zone 9", 
     "activity": "0"}, 
     {"name": "Zone 10", 
     "activity": "0"}, 
     {"name": "Zone 11", 
     "activity": "1"}, 
     {"name": "Zone 12", 
     "activity": "1"}, 
     {"name": "Zone 13", 
     "activity": "0"}, 
     {"name": "Zone 14", 
     "activity": "0"}, 
     {"name": "Zone 15", 
     "activity": "1"}, 
    ]; 

Answer 1

私はテーブルを使用して示されており、ボタンは次のページに移動するにはどのくらい制御するコントローラでページネーションを実装します：ここに私のオブジェクトです。 This Fiddleがお手伝いします。

<table class="table table-striped table-condensed table-hover"> 
       <thead> 
        <tr> 
         <th class="id">Id&nbsp;<a ng-click="sort_by('id')"><i class="icon-sort"></i></a></th> 
         <th class="name">Name&nbsp;<a ng-click="sort_by('name')"><i class="icon-sort"></i></a></th> 
         <th class="description">Description&nbsp;<a ng-click="sort_by('description')"><i class="icon-sort"></i></a></th> 
         <th class="field3">Field 3&nbsp;<a ng-click="sort_by('field3')"><i class="icon-sort"></i></a></th> 
         <th class="field4">Field 4&nbsp;<a ng-click="sort_by('field4')"><i class="icon-sort"></i></a></th> 
         <th class="field5">Field 5&nbsp;<a ng-click="sort_by('field5')"><i class="icon-sort"></i></a></th> 
        </tr> 
       </thead> 
       <tfoot> 
        <td colspan="6"> 
         <div class="pagination pull-right"> 
          <ul> 
           <li ng-class="{disabled: currentPage == 0}"> 
            <a href ng-click="prevPage()">« Prev</a> 
           </li> 
           <li ng-repeat="n in range(pagedItems.length)" 
            ng-class="{active: n == currentPage}" 
           ng-click="setPage()"> 
            <a href ng-bind="n + 1">1</a> 
           </li> 
           <li ng-class="{disabled: currentPage == pagedItems.length - 1}"> 
            <a href ng-click="nextPage()">Next »</a> 
           </li> 
          </ul> 
         </div> 
        </td> 
       </tfoot> 
       <tbody> 
        <tr ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse"> 
         <td>{{item.id}}</td> 
         <td>{{item.name}}</td> 
         <td>{{item.description}}</td> 
         <td>{{item.field3}}</td> 
         <td>{{item.field4}}</td> 
         <td>{{item.field5}}</td> 
        </tr> 
       </tbody> 
      </table> 

フィドル例の$ scope.rangeは次のようになります。ここでは

$scope.range = function (size,start, end) { 
    var ret = [];   
    console.log(size,start, end); 

     if (size < end) { 
     end = size; 
     if(size<$scope.gap){ 
      start = 0; 
     }else{ 
      start = size-$scope.gap; 
     } 

    } 
    for (var i = start; i < end; i++) { 
     ret.push(i); 
    }   
    console.log(ret);   
    return ret; 
}; 

Answer 2

は私のソリューションです。 @Maxim Shoustinのソルーションにはソートに関する問題があります。私はまた、すべてを指示に包んでいます。唯一の依存関係はUI.Bootstrap.paginationであり、これはページネーションに関して優れた仕事をしました。ここで

はここplunker

である私は、このソリューションを使用github source code.

Answer 3

です：

私が使用しているためそれはもう少し簡潔です：ng-repeat="obj in objects | filter : paginate"行をフィルタリングします。また、それは$リソースで作業を行わ：

http://plnkr.co/edit/79yrgwiwvan3bAG5SnKx?p=preview

Answer 4

ここで私はあなたがそれをより効率的になり、コードを確認することができます サーバー側の+ビュー最後に、いくつかのより多くの微調整と私のangularJSページネーションの問題を解決してきました。 私は2つの値の開始番号と終了番号を入れなければなりません。返されるjson配列のインデックスを表します。あなたは慎重に$ scope.CountStartと $スコープを見れば、ここ

は角

var refresh = function() { 
    $('.loading').show(); 
    $http.get('http://put.php?OutputType=JSON&r=all&s=' + $scope.CountStart + '&l=' + $scope.CountEnd).success(function (response) { 
     $scope.devices = response; 


     $('.loading').hide(); 
    }); 
}; 

です。CountStartページ数がゼロ私の前であれば、私は、API

に渡しています2番目の引数は、ここで次のボタンのコードここ

$scope.nextPage = function() { 
    $('.loading').css("display", "block"); 
    $scope.nextPageDisabled(); 


    if ($scope.currentPage >= 0) { 
     $scope.currentPage++; 

     $scope.CountStart = $scope.CountStart + $scope.DevicePerPage; 
     $scope.CountEnd = $scope.CountEnd + $scope.DevicePerPage; 
     refresh(); 
    } 
}; 

は、前ボタンのコード

$scope.prevPage = function() { 
    $('.loading').css("display", "block"); 
    $scope.nextPageDisabled(); 

    if ($scope.currentPage > 0) { 
     $scope.currentPage--; 

     $scope.CountStart = $scope.CountStart - $scope.DevicePerPage; 
     $scope.CountEnd = $scope.CountEnd - $scope.DevicePerPage; 

     refresh(); 

    } 
}; 

ですされていますボタンは無効になります

$scope.nextPageDisabled = function() { 

    console.log($scope.currentPage); 

    if ($scope.currentPage === 0) { 
     return false; 
    } else { 
     return true; 
    } 
}; 

Answer 5

表papging、ソートとフィルタ

Angularjs table sorting filter and paging

Answer 6

で完全な例を参照してください。これは私が改ページが見つかり最も単純な例です！ http://code.ciphertrick.com/2015/06/01/search-sort-and-pagination-ngrepeat-angularjs/

Answer 7

ページングのための最も簡単なプラグアンドプレイソリューション。

https://ciphertrick.com/2015/06/01/search-sort-and-pagination-ngrepeat-angularjs/#comment-1002

あなたはジュースは、カスタムディレクティブでNGリピートを交換する必要があります。 uはちょうどちょうど依存関係

angular.module('userApp',['angularUtils.directives.dirPagination']); 

とのthatsを追加するには、モジュールでは、あなたのindex.html負荷

<script src="./js/dirPagination.js"></script> 

で

<div align="center"> 
     <dir-pagination-controls 
      max-size="100" 
      direction-links="true" 
      boundary-links="true" > 
     </dir-pagination-controls> 
</div> 

を追加する必要があり、ページ内

<tr dir-paginate="user in userList|filter:search |itemsPerPage:7"> 
<td>{{user.name}}</td></tr> 

すべてのページングに必要です。

誰かに役立つ可能性があります。