CODEWITHSUNDEEP
javascriptangularjs
Alex McMillan
Alex McMillan

Reputation: 17962

AngularJS ng-repeat conditionals

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.

Upvotes: 6

Views: 1272

Answers (3)

Gurjaspal
Gurjaspal

Reputation: 74

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

Upvotes: 1

Tung Vo
Tung Vo

Reputation: 2549

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

Upvotes: 1

underscore
underscore

Reputation: 6887

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'" />

Upvotes: 0

Related Questions