Geek Answers Handbook

AngularJS ng-repeat conventions

I have an array of JS objects (e.g. paragraphs in a document) and I want to display them using angularJS. ng-repeat seems to be the directive I need:

<span ng-repeat="paragraph in paragraphs">{{paragraph.text}}</span>

However, I need to do more than just display their contents in this loop. I need to insert page breaks (for visual purposes only, for example: <div class="pagebreak" /> ) after x pixels (trying a WYSIWYG document).

My question is :

Is it possible to have some kind of conditional logic to calculate how many pixels the previous paragraphs were used vertically, and if it is more than x , insert a div and reset page counter?

Any help / advice / direction is greatly appreciated.

+6
source share
3 answers

I think you could use ngClass

 <span ng-repeat="paragraph in paragraphs" ng-class="checkCondition()">{{paragraph.text}}</span>

in checkCondition

 $scope.checkCondition=function(){ if(yourCodition) return pagebreak };
+1
source

I wrote code that adds HTML tags if the range height is greater than 40. The HTML code that it adds is a gap in this case.

App.js file

 var myApp = angular.module('MyApp', []) .controller('MyController', function ($scope) { $scope.value = 'Working'; $scope.count = 0; $scope.calculate = function(level) { var element2 = '#Span' + level; height = $(element2).height(); htmltext = $(element2).html(); if (height > 40) { //if height of span is greater than 45 $(element2).html(htmltext + '<br>'); //Add the html you want } else { } return "Height of span =" + height; // return ""; } });

App.css file

 #Span0 { color:red; } #Span1 { color:green; } #Span2 { color:blue; } #Span3 { color:red; } #Span4 { color:red; }

index.html

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script> <script src="app.js"></script> <link href="app.css" rel="stylesheet" /> </head> <body ng-app="MyApp" ng-controller="MyController" ng-init="paragraphs = [ {text: 'This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph.'}, {text:'This is the second. This is the second.This is the second.This is the second.This is the second.This is the second.This is the second.This is the second.This is the second.This is the second.This is the second.This is the second.This is the second.This is the second.This is the second.This is the second.'}, {text: 'This is the third. This is the third.This is the third.This is the third.'}];"> {{value}} {{count}} <span ng-repeat="paragraph in paragraphs" ng-change="ngChangeCalled()" id="Span{{$index}}" ng-model="repeatSpan">{{paragraph.text}} {{calculate($index)}}"</span> </body> </html>

Any questions please let me know. You can find jsbin here

+1
source

I think you can analyze the current paragraph text length using ng-model for the controller, and if it matches your x pixel conditions and uses ng-show to display the pagebreak div

 <span ng-model='paragraph' ng-repeat="paragraph in paragraphs">{{paragraph.text}}</span> <div class="pagebreak" ng-show="'show=='WhenItMatch'" />
0
source

More articles:


All Articles