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() {
\t \t 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>
私は、しかし、あなたは私がattemtimngたものmissunderstoodているように見える、あなたの答えをありがとう達成するために。私の意図はA4用紙を模倣することなので、部門内のスクロールが役に立たない。したがって、最初のものが満たされたら、 ".page"で新しいdivを作成する必要があります。意図は印刷物をプレビューすることです！ – Cevil