2016-11-18 35 views
0

私のデータテーブルのいずれかでng-repeatにui-bootstrapページネーションを適用します。テーブルがng-viewの外側にあるときにはうまく動作しますが、ng-viewフィルタの内側にあるとソートがうまく動作し、ページネーションが次のエラーを出します。ui-bootstrapページネーションは、ng-viewではうまく動作しますが、ng-viewでは動作しません。

ディレクティブのページングのテンプレートには、正確に1つのルート要素が必要です。テンプレート/ページ区切り/ページ区切り.html

私はバックエンドで春休みサービスを使用しています。

<script src="http://code.angularjs.org/1.2.16/angular-resource.js"></script> 
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script> 

これらは私が含まれたファイルです。

コントローラコード)

controller("FileController", function($window, $scope, $location) { 


$scope.order = function (predicate) { 
    $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false; 
    $scope.predicate = predicate; 
}; 

$scope.paginate = function (value) { 
    var begin, end, index; 
    begin = ($scope.currentPage - 1) * $scope.numPerPage; 
    end = begin + $scope.numPerPage; 
    index = $scope.fileList.indexOf(value); 
    return (begin <= index && index < end); 
}; 

}です。 HTMLで

とページネーションタグが

<pagination total-items="totalItems" ng-model="currentPage" 
            max-size="10" boundary-links="true" 
            items-per-page="numPerPage" class="pagination-sm"> 
           </pagination> 

答えて

0

してください、see this documentationです。

コードは表示されませんが、ディレクティブテンプレートに複数のルート要素が含まれているようです。原則的にはそう

、代わりに

<head> 

</head> 
<body> 

</body> 

を行うの

<html> 
    <head> 

    </head> 
    <body> 

    </body> 
</html> 
0

はあなた含まCSSやJSを確認してください。ブラウザのコンソールでエラーを確認してください。

私はサンプルを作成してより多くの洞察を与えるでしょう。

DEMO

<script type="text/ng-template" id="about.html"> 
    <h1>About TODO</h1> 
    <h4>{{todos.length}} total</h4> 
    <ul> 
     <li ng-repeat="todo in filteredTodos">{{todo.text}}</li> 
    </ul> 
    <pagination 
     ng-model="currentPage" 
     total-items="todos.length" 
     max-size="maxSize" 
     boundary-links="true"> 
    </pagination> 
</script> 
関連する問題