AngularJS ng-repeat conditionals

Question

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.

I think that could be achieved with filtering see bit.ly/T0LY2r. — Wazery
– Wazery, Commented May 14, 2014 at 5:33
Thanks, will look at that soon. My problem with ng-show is that this HTML is template for a directive, and if I have <span ng-show="xxx">{{something}}</span><span ng-show="yyy">{{something else}}</span> I get an error 'directive template must have exactly one root node'. — Alex McMillan
– Alex McMillan, Commented May 14, 2014 at 7:16

Tung Vo · Accepted Answer · 2014-05-14 06:52:53Z

1

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  };

edited May 14, 2014 at 6:52

answered May 14, 2014 at 6:47

Tung Vo

2,5876 gold badges31 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex McMillan Over a year ago

I need to insert html BETWEEN the paragraphs. Simply adding a class to the last paragraph on a page won't work.

Gurjaspal · Accepted Answer · 2014-05-15 18:29:38Z

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

underscore · Accepted Answer · 2014-05-14 04:10:19Z

0

I think you can parse the current paragraph text length using ng-model to the controller and if it is match with your x pixels conditions and use ng-show to show pagebreak div

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

answered May 14, 2014 at 4:10

underscore

6,9277 gold badges44 silver badges82 bronze badges

2 Comments

Sunil D. Over a year ago

This won't intersperse the "page breaks" in between the paragraphs, b/c <div class="pagebreak"> is outside of the ng-repeat ;)

Alex McMillan Over a year ago

I'm new to AngularJS and I'm still learning how to interact with directives... could you explain ng-show="'show=='WhenItMatch'" ? The quote's don't appear to match. Do I need to create a function called "show"? Or is that supposed to be a variable on the $scope? Or do I make a variable WhenItMatch? Does that need to be on the $scope, or on the paragraph?

Collectives™ on Stack Overflow

AngularJS ng-repeat conditionals

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related