javascript - 以 Angular 循环遍历对象时获取div的当前高度

Question

我想生成一个 View ，看起来像在使用从数据库生成的数据在 google 文档上查看 PDF 时的 View 。也就是说，我想填充一个 A4 纸大小的 div，当它填满时，它应该在一个新的 A4 div 中继续。我无法找到执行此操作的最佳解决方案，因此欢迎提供有关可能解决方案的任何提示。到目前为止，我的解决方案如下:

下面的 HTML 表示一张 A4 纸，其中 .page 作为 A4 类。

<div class="page">
    <div id="prev">

    <div ng-repeat="week in home.elements" style="width: 100%;padding: 1rem;">
        <div class="week-container" style="background: #fbfbfb;">
            <h5 id="ch1" class="week">{{week.week}}</h5>

            <div class="week-event" print-avoid-break ng-repeat="event in week.events">
                <div class="event-name">
                    <div class="event-color" style="background: {{event.activityTypeColor}}"></div>
                    <h6>{{event.name}}</h6>
                </div>
                <div class="row">
                    <div class="col-md-9 col-sm-9 col-xs-9">

                        <div class="event-description">
                            <p>{{event.description}}</p>
                        </div>
                    </div>

                    <div class="col-md-3 col-sm-3 col-xs-3">

                        <div ng-if="event.files.length > 0" class="event-files">
                            <p>
                                <span style="float: left;" ng-if="event.files.length > 0">Eventet har filer</span>
                                <span ng-if="event.links.length > 0"> Eventet har länkar</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    </div>
</div>

然后 Controller 有这个函数，我打算用它来检查 div 的高度，因为当数据加载到它时 div 会增长。然而，div 在整个循环中保持高度为 0。

vm.testingTesting = function(){
    var log = [];
    var myElement = angular.element( document.querySelector( '#prev' ) );

    angular.forEach(vm.wheelTemp.events, function(value, key) {
        myElement = angular.element( document.querySelector( '#prev' ) );
        if (myElement[0].clientHeight < 969) {
            vm.elements.push(value);
        }
    }, log);
}

有希望展示我正在尝试做的事情的 fiddle :http://jsfiddle.net/adao9bw5/1/

Answer 1

var app = angular.module('demo', []);

app.controller('homeCtrl', function($scope) {
  console.log("sickValFAm")
  var log = [];
  var myElement = angular.element(document.querySelector('#prev'));
  $scope.elements = [];


  $scope.test = function() {
		console.log(myElement[0].clientHeight);

    angular.forEach($scope.wheelTemp.events, function(value, key) {
      myElement = angular.element(document.querySelector('#prev'));
      if (myElement[0].clientHeight < 969) {
        $scope.elements.push(value);
        console.log($scope.elements);
        console.log(myElement[0].clientHeight);
      }
    }, log);
  }

  $scope.wheelTemp = {
    "name": "ACCRUEX",
    "printDate": "2016-04-09T06:39:40 -02:00",
    "printerName": "Simpson Grant",
    "wheelYear": 2016,
    "events": [{
      "week": 40,
      "events": [{
        "name": "DATAGENE",
        "description": "Esse in culpa sunt Lorem. Eiusmod nostrud incididunt minim mollit occaecat irure ad in non nisi. Aute enim consectetur anim eiusmod consequat Lorem officia exercitation excepteur. Cupidatat qui proident irure occaecat duis.\r\n",
        "activityType": "Gilbert",
        "activityTypeColor": "green",
        "files": [{
          "name": "ipsum"
        }, {
          "name": "dolore"
        }, {
          "name": "eiusmod"
        }],
        "links": [{
          "name": "qui"
        }, {
          "name": "nostrud"
        }, {
          "name": "cillum"
        }]
      }, {
        "name": "APEXIA",
        "description": "Cillum quis incididunt officia fugiat nostrud incididunt est et quis pariatur reprehenderit qui. Laborum anim reprehenderit esse excepteur dolore sint deserunt est amet do ea ad. Quis duis amet eu irure est id.\r\n",
        "activityType": "Cathryn",
        "activityTypeColor": "brown",
        "files": [{
          "name": "eiusmod"
        }],
        "links": [{
          "name": "officia"
        }]
      }, {
        "name": "GEEKWAGON",
        "description": "Excepteur reprehenderit ad mollit dolore cupidatat reprehenderit excepteur sint quis excepteur reprehenderit. Adipisicing mollit cupidatat adipisicing proident voluptate reprehenderit eiusmod ex ea elit voluptate sit culpa qui. Aute incididunt laboris ipsum ipsum.\r\n",
        "activityType": "Ward",
        "activityTypeColor": "blue",
        "files": [{
          "name": "exercitation"
        }],
        "links": [{
          "name": "ipsum"
        }, {
          "name": "culpa"
        }, {
          "name": "ut"
        }]
      }, {
        "name": "EGYPTO",
        "description": "Voluptate nulla laboris nostrud ullamco tempor incididunt qui. Consectetur in eu eu sint nulla sunt culpa. Eu non quis in enim fugiat. Eu elit nisi culpa aute amet reprehenderit aliqua voluptate aliqua quis. Veniam cillum officia est ut voluptate veniam. Sunt minim ullamco deserunt officia duis dolor cupidatat aliquip incididunt excepteur tempor. Mollit non adipisicing veniam aliquip aliqua Lorem anim sint minim sit.\r\n",
        "activityType": "Schultz",
        "activityTypeColor": "green",
        "files": [{
          "name": "minim"
        }, {
          "name": "labore"
        }, {
          "name": "ullamco"
        }, {
          "name": "est"
        }],
        "links": [{
          "name": "veniam"
        }]
      }, {
        "name": "ENQUILITY",
        "description": "Amet adipisicing nisi consectetur occaecat do sint laboris aute officia veniam ullamco proident dolor. Et voluptate nostrud sint ea ut est irure. Occaecat est amet cillum velit amet velit est est ad tempor ipsum est ex adipisicing.\r\n",
        "activityType": "Sykes",
        "activityTypeColor": "brown",
        "files": [],
        "links": [{
          "name": "cupidatat"
        }, {
          "name": "non"
        }]
      }]
    }, {
      "week": 25,
      "events": [{
        "name": "AMRIL",
        "description": "Duis cillum est esse ipsum commodo Lorem. Et sint ad adipisicing sunt ipsum anim. Cillum nostrud voluptate laborum adipisicing mollit eu eu Lorem ullamco.\r\n",
        "activityType": "Vilma",
        "activityTypeColor": "brown",
        "files": [{
          "name": "enim"
        }, {
          "name": "esse"
        }, {
          "name": "aliquip"
        }, {
          "name": "qui"
        }],
        "links": []
      }, {
        "name": "GINK",
        "description": "Dolore sunt aliqua nisi in ut magna irure reprehenderit minim officia magna. Ipsum aliqua non magna adipisicing commodo elit anim labore commodo eiusmod. Dolore labore nostrud ullamco Lorem non sint velit incididunt id incididunt eu irure velit. Esse fugiat reprehenderit ut veniam et qui reprehenderit ut tempor aliquip ut labore id cupidatat. Id nisi qui voluptate in eiusmod Lorem duis quis exercitation laborum quis quis.\r\n",
        "activityType": "Kirk",
        "activityTypeColor": "brown",
        "files": [{
          "name": "officia"
        }, {
          "name": "commodo"
        }],
        "links": [{
          "name": "ipsum"
        }, {
          "name": "sit"
        }]
      }, {
        "name": "GRAINSPOT",
        "description": "Labore consectetur cupidatat ipsum dolor. Dolore qui proident velit ullamco consectetur irure enim cupidatat officia Lorem. Aliqua sint incididunt aliquip aute. Consequat in fugiat non mollit ex sunt. Fugiat labore ipsum ad nisi consectetur enim et esse et ullamco.\r\n",
        "activityType": "Deidre",
        "activityTypeColor": "blue",
        "files": [{
          "name": "ad"
        }, {
          "name": "nostrud"
        }, {
          "name": "ullamco"
        }, {
          "name": "deserunt"
        }],
        "links": [{
          "name": "voluptate"
        }, {
          "name": "proident"
        }, {
          "name": "do"
        }]
      }]
    }, {
      "week": 25,
      "events": [{
        "name": "INCUBUS",
        "description": "Non sit eu eu laborum ex ad laborum. Nisi est nostrud magna do qui cupidatat reprehenderit ad fugiat labore non cupidatat. Exercitation aliqua aliquip in ut velit consectetur nisi velit ex sint dolore et quis.\r\n",
        "activityType": "Castro",
        "activityTypeColor": "brown",
        "files": [{
          "name": "veniam"
        }, {
          "name": "aliqua"
        }, {
          "name": "commodo"
        }, {
          "name": "culpa"
        }],
        "links": [{
          "name": "cupidatat"
        }, {
          "name": "excepteur"
        }, {
          "name": "ullamco"
        }, {
          "name": "nulla"
        }]
      }, {
        "name": "DATAGEN",
        "description": "Fugiat amet excepteur voluptate ut voluptate irure dolor. In deserunt velit do labore dolor cupidatat eiusmod aliqua officia. Occaecat incididunt mollit consequat laboris dolore cupidatat cupidatat nostrud. Dolor laborum laborum veniam officia ut minim ut ex nulla cillum Lorem sint reprehenderit. Magna mollit amet et ipsum. Commodo est elit in exercitation. Cillum non consectetur elit amet nostrud laboris.\r\n",
        "activityType": "Rosie",
        "activityTypeColor": "green",
        "files": [{
          "name": "tempor"
        }, {
          "name": "dolor"
        }, {
          "name": "veniam"
        }, {
          "name": "aliqua"
        }],
        "links": [{
          "name": "mollit"
        }, {
          "name": "enim"
        }, {
          "name": "labore"
        }, {
          "name": "id"
        }]
      }]
    }]
  }
})

.print-menu {
  position: fixed;
  padding: 20px;
  right: 350px;
  background: #fff;
  width: 200px;
}

.weeks-to-print-menu {
  max-height: 500px;
  overflow-y: scroll;
  border: 1px solid #ccc;
}

.weeks-to-print-menu ul {
  list-style: none;
  padding: 10px;
  margin-bottom: 0;
  font-size: 1.4rem;
  border-bottom: 1px solid #ccc;
}

#wheel-name {
  text-align: center;
}

.wheel {
  width: 80%;
  margin-left: 10%;
}

.wheel img {
  width: 100%;
}

.week-container {
  padding: 2rem;
  border: 1px solid #c9c9c9;
  margin-bottom: 20px;
}

.event-name h6 {
  line-height: 22px;
  margin-left: 30px;
}

.week {
  text-align: center;
}

.week-event {
  background: #fff;
  margin-bottom: 1rem;
  width: 100%;
  border: 1px solid #ccc;
  padding: 1rem;
}

.event-color {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  float: left;
}

.week-event p {
  font-size: 1rem;
}

.page {
  width: 210mm;
  min-height: 297mm;
  max-height: 297mm;
  padding: 20mm;
  margin: 10mm auto;
  border: 1px #D3D3D3 solid;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.subpage {
  padding: 1cm;
  border: 5px red solid;
  height: 257mm;
  outline: 2cm #FFEAEA solid;
}

@page {
  size: A4;
  margin: 0;
}

@media print {
  html,
  body {
    width: 210mm;
    height: 297mm;
  }
  .page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='demo'>
  <div ng-controller="homeCtrl">


    <button ng-click="test()" style="width:100px;height:50px;border:1px solid #c9c9c9;text-align: center; line-height : 50px;">
      test
      <button>



        <div class="page" style="overflow:auto;">
          <div id="prev" >

            <div ng-repeat="week in elements" style="width: 100%;padding: 1rem;">
              <div class="week-container" style="background: #fbfbfb;">
                <h5 id="ch1" class="week">{{week.week}}</h5>

                <div class="week-event" print-avoid-break ng-repeat="event in week.events">
                  <div class="event-name">
                    <div class="event-color" style="background: {{event.activityTypeColor}}"></div>
                    <h6>{{event.name}}</h6>
                  </div>
                  <div class="row">
                    <div class="col-md-9 col-sm-9 col-xs-9">

                      <div class="event-description">
                        <p>{{event.description}}</p>
                      </div>
                    </div>

                    <div class="col-md-3 col-sm-3 col-xs-3">

                      <div ng-if="event.files.length > 0" class="event-files">
                        <p>
                          <span style="float: left;" ng-if="event.files.length > 0">Eventet har filer</span>
                          <span ng-if="event.links.length > 0"> Eventet har länkar</span>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>

          </div>
        </div>

  </div>
</div>