Question

我有一个JS对象数组（例如文档中的段落），我想使用angularJS显示它们。 ng-repeat似乎是我需要的指示：

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

但是，我需要做的不仅仅是在这个循环中显示它们的内容。我需要在<div class="pagebreak" />像素之后插入分页符（仅用于视觉目的，例如：x）（尝试WYSIWYG文档）。

我的问题：

是否可以使用某种条件逻辑来计算前面段落垂直使用的像素数，如果它超过x，是否插入分页符div并重置计数器？

非常感谢任何帮助/建议/指导。

Answer 1

我认为你可以使用ngClass

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

中的

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

Answer 2

如果span的高度大于40，我编写了一个添加HTML标记的代码。在这种情况下，它添加的HTML代码就是中断。

文件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 "";

       }
   });

文件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>

有任何问题请告诉我。你可以找到Jsbin here

Answer 3

我认为您可以使用ng-model将当前段落文本长度解析到控制器，如果它与您的x像素条件匹配，并使用ng-show显示pagebreak div

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

AngularJS ng-repeat条件

3 个答案: