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>
謝謝你的回答，但你似乎有missunderstood我是attemtimng去完成。能夠在div中滾動不起作用，因爲我的意圖是模仿A4紙。因此，一旦第一個填充完成，它需要用「.page」創建一個新的div。打算預覽印刷品！ – Cevil