37

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"},
    ];
4

8 に答える 8

71

テーブルを使用し、コントローラーにページネーションを実装して、表示される量と次のページに移動するボタンを制御します。この 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;
};
于 2013-10-16T18:24:35.927 に答える
13

私はこの解決策を使用します：

私が使用しているので、もう少し簡潔です:ng-repeat="obj in objects | filter : paginate"行をフィルタリングします。また、$resource で動作するようにしました:

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

于 2014-05-09T22:20:08.967 に答える
8

これが私の解決策です。@Maxim Shoustin のソリューションには、並べ替えに関する問題があります。また、全体をディレクティブにラップします。唯一の依存関係は UI.Bootstrap.pagination で、これはページネーションで素晴らしい仕事をしました。

プランカーはこちら

ここにgithubのソースコードがあります。

于 2014-03-17T17:42:53.257 に答える
7

ここで、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 を注意深く見ると、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;
    }
};
于 2015-09-23T09:46:54.160 に答える
2

papging、sort、およびfilterを含むテーブル

ここに画像の説明を入力

Angularjs テーブルの並べ替えフィルターとページングで完全な例を参照してください。

于 2015-11-04T08:33:53.310 に答える