2015-11-06 3 views
0

У меня есть html json data load на представлении, и я хочу сделать его похожим на книгу, у которой есть одна страница, чтобы быть разумным количеством текста для размера экрана, тогда пользователь переключит страницу и посмотреть больше. Как это сделать.сделать одну страницу разумной angularjs

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> 

enter image description here

ответ

0

Вы можете разделить содержание страницы в количестве страниц. Итерации по этим страницам и показ только по одному и по нажатию следующей/предыдущей кнопки показывают следующую/предыдущую страницу с помощью директив ng-if/ng-show.

Также вы можете использовать angular-ui для пагинации

+0

Хорошо, но как вы знаете, сколько текста разделить на содержание? –

Смежные вопросы