0

最初に ng テーブル ページャー テンプレートを使用しました

ng-click="params.page(page.number)" の代わりに ng-click='first()' のようなカスタム関数を使用できません

次に、スコープ内でパラメーターを呼び出します。

誰でもこれについて私を助けることができます. ありがとう。

4

1 に答える 1

1

ngTable にバインドされたカスタム ページネーション テンプレートは新しいスコープを作成します。これにより、params.page(1) などの params で定義された関数のみが機能します。そのため、カスタム ページネーション テンプレートを ngTable にバインドする代わりに、別のコントロール セットを使用してページネーション機能を提供できます。

plunkr を参照してください: http://plnkr.co/edit/dZf4UkRbhQd2Jixi9f39?p=preview

index.html

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
    <script data-require="ng-table@*" data-semver="0.3.0" src="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js"></script>

    <link data-require="ng-table@*" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css" />
    <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />

    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

<body ng-app="main" ng-controller="DemoCtrl">

    <table ng-table="tableParams" class="table">
        <tr ng-repeat="user in $data">
            <td data-title="'Name'">
                {{user.name}}
            </td>
            <td data-title="'Age'">
                {{user.age}}
            </td>
        </tr>
    </table>

    <p><strong>Page:</strong> {{ tableParams.page() }}</p>
    <button class="btn btn-default" ng-click="previous()">Previous</button>
    <button class="btn btn-default" ng-click="next()">Next</button>
    <button class="btn btn-default" ng-click="info()">Info</button>

</body>
</html>

script.js

var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, ngTableParams) {
    var data = [{name: "Moroni", age: 50},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34}];

    var count=1;            



    $scope.tableParams = new ngTableParams({
        page: 1,   // show first page
        count: 5 , // count per page

    }, {
        counts: [], // hide page counts control
        total: 1,  // value less than count hide pagination
        getData: function($defer, params) {
            $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));

          this.current=params.count();
        }

    });

    $scope.next=function(){
      console.log("next called");
    count++;  
     $scope.tableParams.page(count);
   };

   $scope.previous=function(){
     console.log("previous called");
     if(count>1)
      count--;  
     $scope.tableParams.page(count);

   }




   $scope.info=function(){
     console.log("info called");
     console.log("page: "+(($scope.tableParams.page() - 1) * $scope.tableParams.count())+"to"+($scope.tableParams.page() * $scope.tableParams.count()));
   }

});

ここでは、コントローラーでカスタム関数を定義し、$scope.tableParams.page(count) を使用して特定のページにページ付けしました。

于 2014-08-06T10:09:22.177 に答える