Question

我在视图上加载了html json数据，并且我想让它像一本书，其中单页是一个合理数量的文本用于屏幕大小，然后用户将翻页并查看更多。我该如何实现。

controller.js

.controller('bookCtrl',function($scope,$sce){

                    $scope.book = bookinfo;

                //convert html function
                    $scope.to_trusted = function(html_code) {
                    return $sce.trustAsHtml(html_code);
                }
})

var bookinfo = [
{"content": "<body>\n<div class=\"pgmonospaced pgheader\" xml:space=\"preserve\"><br/>The Project Gutenberg EBook of A Study In Scarlet, by Arthur Conan Doyle<br/><br/>This eBook is for the use of anyone anywhere at no cost and with<br/>almost no restrictions whatsoever.\u00a0 You may copy it, give it away or<br/>re-use it under the terms of the Project Gutenberg License included<br/>with this eBook or online at www.gutenberg.org<br/><br/><br/>Title: A Study In Scarlet<br/><br/>Author: Arthur Conan Doyle<br/><br/>Release Date: July 12, 2008 [EBook #244]<br/>[Last updated: February 17, 2013]<br/><br/>Language: English<br/><br/><br/>*** START OF THIS PROJECT GUTENBERG EBOOK A STUDY IN SCARLET ***<br/><br/><br/><br/><br/>}
]

的index.html

    <div class="list card">     
    <ul>
        <li ng-repeat="item in book" >
            <h6 ng-bind-html="to_trusted(item.content)"></h6>
        </li>
    </ul>
    </div>

Answer 1

您可以将页面内容分为页数。迭代这些页面，一次只显示一个，并使用ng-if/ng-show指令单击下一个/上一个按钮显示下一个/上一个页面。

您也可以使用angular-ui进行分页

使单页成为合理的angularjs

1 个答案: