获取div的当前高度,同时以角度循环对象

时间:2017-03-06 12:49:46

标签: javascript html css angularjs

我希望生成一个类似于使用数据库生成的数据在Google文档上查看PDF时的视图。也就是说,我想填写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>

控制器然后有这个功能,我打算用它来检查div的高度,因为当数据加载到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);
}

希望能够展示我尝试做的事情的小提琴:http://jsfiddle.net/adao9bw5/1/

1 个答案:

答案 0 :(得分:0)

self.searchBar.searchBarStyle = UISearchBarStyleMinimal;

UITextField *txfSearchField = [_searchBar valueForKey:@"_searchField"];
    txfSearchField.borderStyle = UITextBorderStyleNone;
    txfSearchField.backgroundColor = yourColor;
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;
  }
}