Skip to main content
1 de 5
Marcos
  • 35.7k
  • 7
  • 36
  • 70

El problema en tu ejemplo es que el div con id="new" es el que tiene la directiva ng-repeat, esto provoca que se creen n elementos con id="new", con JS buscas el elemento por id (pero siempre obtienes el primero) y es por esto que siempres obtienes el mismo resultado.

##Solución:

Si el div con id="new" es el que necesitas que contenga los elementos creados con ng-repeat, entonces podrías mover dicha directiva a un span hijo de éste.

###Ejemplo:

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [{
    id: 1,
    name: "maria"
  }, {
    id: 2,
    name: "juan"
  },{
    id: 3,
    name: "maria"
  }, {
    id: 4,
    name: "juan"
  },{
    id: 5,
    name: "maria"
  }, {
    id: 6,
    name: "juan"
  },{
    id: 1,
    name: "maria"
  }, {
    id: 2,
    name: "juan"
  },{
    id: 3,
    name: "maria"
  }, {
    id: 4,
    name: "juan"
  },{
    id: 5,
    name: "maria"
  }, {
    id: 6,
    name: "juan"
  },{
    id: 1,
    name: "maria"
  }, {
    id: 2,
    name: "juan"
  },{
    id: 3,
    name: "maria"
  }, {
    id: 4,
    name: "juan"
  },{
    id: 5,
    name: "maria"
  }, {
    id: 6,
    name: "juan"
  }]
});

window.setTimeout(function(){
var s = document.getElementById('new');
console.log(s.offsetWidth);
});
#new {
  display: inline-block;
  white-space: nowrap;
  clear: both;
}

#new > span {
  margin-right: 5px;
}
<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="new">
      <span ng-repeat="x in records">{{x.id}}.- {{x.name}}</span>
    </div>
  </div>
</div>

Marcos
  • 35.7k
  • 7
  • 36
  • 70