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 simple:
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, $timeout) {
$scope.records = [
{id: 1, name: "maria"},
{id: 2, name: "juan"},
{id: 3, name: "antonio"},
{id: 4, name: "fernando"},
{id: 5, name: "josé"},
{id: 6, name: "julio"},
{id: 7, name: "marisel"},
{id: 8, name: "julia"},
{id: 9, name: "rosario"},
{id: 10, name: "dolores"},
{id: 11, name: "maria"},
{id: 12, name: "juan"},
{id: 13, name: "antonio"},
{id: 14, name: "fernando"},
{id: 15, name: "josé"}
];
$timeout(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>
##Solución avanzada:
Para esperar hasta que realmente se hayan renderizado todos los elementos podrías crear una directiva (afterRender
) para obtener el ancho.
###Ejemplo:
var app = angular.module("myApp", []);
app.directive('afterRender', ['$timeout', function($timeout) {
return {
restrict: 'A',
link: function($scope) {
$timeout($scope.afterResize, 0); //Calling a scoped method
}
};
}]);
app.controller("myCtrl", function($scope) {
$scope.records = [
{id: 1, name: "maria"},
{id: 2, name: "juan"},
{id: 3, name: "antonio"},
{id: 4, name: "fernando"},
{id: 5, name: "josé"},
{id: 6, name: "julio"},
{id: 7, name: "marisel"},
{id: 8, name: "julia"},
{id: 9, name: "rosario"},
{id: 10, name: "dolores"},
{id: 11, name: "maria"},
{id: 12, name: "juan"},
{id: 13, name: "antonio"},
{id: 14, name: "fernando"},
{id: 15, name: "josé"}
];
$scope.afterResize = 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 after-render id="new">
<span ng-repeat="x in records">{{x.id}}.- {{x.name}}</span>
</div>
</div>
</div>