Menu
I have an array of JS objects (eg paragraphs in a document) and I want to display them using angularJS. ng-repeat appears 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 (just for visual purposes, eg: <div class="pagebreak" />) after x pixels (attempting WYSIWYG document).
My Question:
Is it possible to have some kind of conditional logic to count how many pixels the previous paragraphs have used vertically, and if it is more than x, insert a pagebreak div and reset the counter?
Any help/advice/direction much appreciated.
923
AngularJS ng-repeat Directive The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.
Each ng-repeat creates a child scope with the passed data, and also adds an additional $index variable in that scope. So what you need to do is reach up to the parent scope, and use that $index . Save this answer.
$index is a way to show which iteration of a loop you're in. If we set up an ng-repeat to repeat over the letters in 'somewords', like so: <div ng-app="app"> <div ng-repeat="item in 'somewords'.split('')"> {{$index + 1}}. {{item}} </div> </div>
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 };
I have written a code that adds HTML tags if the height of span is greater than 40. HTML code it adds is break in this case.
File app.js
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 "";
}
});
File app.css
#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 issues please let me know. You can find Jsbin here
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With