2

Intento obtener el ancho de un div pero siempre sale el mismo valor, hice un ejemplo para ng-repeat obtengo el mismo valor, ¿qué estoy haciendo mal?

cada que incremento por cada repeat se supone que aumente el ancho como se hace eso?

ojo sin jquery solo js puro

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

var s = document.getElementById('new');
console.log(s.offsetWidth );

   
#new {
  width: 30px;
  display: inline-block
}

#dox {
  width: 50px;
}
<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" ng-repeat="x in records">
      <div>{{x.id}}.- {{x.name}}</div>
    </div>
  </div>
</div>

El width de ng-repeat debería ir aumentando por cada repeat que haga o no?

aqui un grafico:

introducir la descripción de la imagen aquí

6
  • No tiendo, el resultado es diferente. Porque dices que te da igual?
    – Einer
    Commented el 27 jul. 2017 a las 22:04
  • 1
    No, porque el elemento que tenga ng-repeat será creado en cada iteración; por lo consiguiente, div#new siempre tendrá el ancho que le has dado por CSS (con algunas variaciones por el modelo de caja).
    – gugadev
    Commented el 28 jul. 2017 a las 4:16
  • @GustavoGarcía como obtener el X?, quiero obtener el ancho del div padre(X) que contenga a todos los divs creados por ng-repeat
    – hubman
    Commented el 28 jul. 2017 a las 4:20
  • 2
    1. Al usar ng-repeat crearás tantos elementos como iteres (es decir, en este caso, tendrás dos elementos div#new con un div cada uno. Aquí el padre, en realidad es el div que tiene el ng-controller.
    – gugadev
    Commented el 28 jul. 2017 a las 6:02
  • Como dice Gustavo los div#new se van repitiendo (por cierto no deberías usar id en ese caso porque tendrás varios iguales). El div padre por defecto ocupará todo el ancho, tendrías que cambiarle el display a inline-block por ejemplo o ponerle un float si te viene mejor para que se ajuste al tamaño de los hijos.
    – user7176
    Commented el 28 jul. 2017 a las 6:15

3 respuestas 3

4

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", ['$scope', '$timeout', 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.afterRender, 0); //Llamamos al metodo del scope
    }
  };
}]);
app.controller("myCtrl", ['$scope', 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.afterRender = 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>

2
  • Ademas con el window.setTimeout te aseguras de coger el ancho solo cuando el ng-repeat sea aplicado completamente Commented el 16 ene. 2020 a las 14:02
  • 1
    @JuniorUsca, gracias por el comentario. Me recordó que tenía que terminar de completar mi respuesta. Ahora uso $timeout. Saludos!
    – Marcos
    Commented el 16 ene. 2020 a las 14:42
3

Los elementos div siempre tomarán el ancho del elemento padre. Si te fijas, he tomado tu propio código y le he pintado los borders, como ves miden exactamente lo mismo porque tú no les has puesto un ancho fijo.

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

var s = document.getElementById('new');
console.log(s.offsetWidth + 'xxxxxxxxx');

var s2 = document.getElementById('dox');
console.log(s2.offsetWidth + 'xxxxxxxxx');
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div style="border: 1px solid green;" ng-app="myApp">
  <div ng-controller="myCtrl">
    <div id="new" ng-repeat="x in records">{{x.id}}.- {{x.name}}</div>
  </div>
</div>
<div style="border: 1px solid red;" id="dox">aaaaaaaaaaaaaaaaaaaaa</div>

1
  • edite mi pregunta
    – hubman
    Commented el 27 jul. 2017 a las 21:39
3
+500

Según entendí de que quieres poner en forma lineal lo que colocas dentro del div que contiene la información a través del ng-repeat

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

var s = document.getElementById('new');
console.log(s.offsetWidth );

   
#new {
  width: 30px;
  display: inline-block
}

#dox {
  width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <ul id="new" ng-repeat="x in records">
      <li>{{x.id}}.- {{x.name}}</li>
    </ul>
  </div>
</div>

1
  • si aumento mas elementos al array-json siempre sale 70 de ancho, deberia aumentar o disminuir segun la cantidad de elementos
    – hubman
    Commented el 28 jul. 2017 a las 4:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.