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"},
];
テーブルを使用し、コントローラーにページネーションを実装して、表示される量と次のページに移動するボタンを制御します。 このフィドル が役立つかもしれません。
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th class="id">Id <a ng-click="sort_by('id')"><i class="icon-sort"></i></a></th>
<th class="name">Name <a ng-click="sort_by('name')"><i class="icon-sort"></i></a></th>
<th class="description">Description <a ng-click="sort_by('description')"><i class="icon-sort"></i></a></th>
<th class="field3">Field 3 <a ng-click="sort_by('field3')"><i class="icon-sort"></i></a></th>
<th class="field4">Field 4 <a ng-click="sort_by('field4')"><i class="icon-sort"></i></a></th>
<th class="field5">Field 5 <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;
};
これは、ページネーションで見つけた最も単純な例です! http://code.ciphertrick.com/2015/06/01/search-sort-and-pagination-ngrepeat-angularjs/
私はこのソリューションを使用します:
私はng-repeat="obj in objects | filter : paginate"
を使用して行をフィルタリングしているため、もう少し簡潔です。また、$ resourceで動作するようにしました:
これが私の解決策です。 @Maxim Shoustinのソリューションには、ソートに関する問題があります。また、すべてをディレクティブにラップします。唯一の依存関係はUI.Bootstrap.paginationで、これはページネーションで素晴らしい仕事をしました。
これは plunker です
ここでは、サーバー側とビューの終わりでさらに調整して、angularJSページネーションの問題を解決しました。コードがより効率的になることを確認できます。私がしなければならないのは、開始番号と終了番号の2つの値を入力することです。これは、返されたjson配列のインデックスを表します。
ここに角度があります
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();
});
};
注意深く見ると、$ scope.CountStartと$ scope.CountStartは2つの引数であり、私はAPIで渡している
ここに次のボタンのコードがあります
$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;
}
};
ページネーションのための最高のシンプルなプラグアンドプレイソリューション。
https://ciphertrick.com/2015/06/01/search-sort-and-pagination-ngrepeat-angularjs/#comment-1002
ng-repeatをカスタムディレクティブに置き換える必要があります。
<tr dir-paginate="user in userList|filter:search |itemsPerPage:7">
<td>{{user.name}}</td></tr>
ページ内に追加するだけです
<div align="center">
<dir-pagination-controls
max-size="100"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
</div>
あなたのindex.htmlロード
<script src="./js/dirPagination.js"></script>
モジュールに依存関係を追加するだけです
angular.module('userApp',['angularUtils.directives.dirPagination']);
そして、それはすべてページネーションに必要です。
誰かに役立つかもしれません。