height of ng-repeat is zero

0

why does zero leave size in height from the div with id="box2"?

the size should be the sum of all json items

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    var box1=document.getElementById("box1");
  var box2=document.getElementById("box2");

  
  console.log(box1.getBoundingClientRect().height);
   console.log(box2.getBoundingClientRect().height);
 
  $scope.records = [{
    id: 1,
    name: "mia"
  }, {
    id: 2,
    name: "juan"
  },{
    id: 2,
    name: "juan"
  }];
  

});
#box1 {
     width: 150px;
     height: 25px;
}

#box2{
height: 50px;
display: block;
}


.visible{
overflow:scroll;
}

.ocultar{
overflow-y: hidden;
}

#cd{
height:10px;
}
<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="myApp">
  <div ng-controller="myCtrl">
    <div id="box1">
      <div id="box2">
        <div id="cd" ng-repeat="x in records">
          <div>{{x.id}}.- {{x.name}}</div>
        </div>
      </div>
   
  </div>
</div>
    
asked by hubman 22.08.2017 в 22:24
source

1 answer

0

The height method places 0 by default in your console because you do not have a height defined on your label <div id="box2">

#box2{
height: 50px;
display: block;
}
    
answered by 22.08.2017 в 22:38