Skip to main content
Commonmark migration
Origen Enlace

##Solución simple:

Solución simple:

###Ejemplo:

Ejemplo:

##Solución avanzada:

Solución avanzada:

###Ejemplo:

Ejemplo:

##Solución simple:

###Ejemplo:

##Solución avanzada:

###Ejemplo:

Solución simple:

Ejemplo:

Solución avanzada:

Ejemplo:

se añadieron 41 caracteres en el cuerpo
Origen Enlace
Marcos
  • 35.7k
  • 7
  • 36
  • 70
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>
var app = angular.module("myApp", []);
app.directive('afterRender', ['$timeout', function($timeout) {
  return {
    restrict: 'A',
    link: function($scope) {
      $timeout($scope.afterResizeafterRender, 0); //CallingLlamamos aal scopedmetodo methoddel 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.afterResizeafterRender = 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>
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>
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>
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>
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>
se añadieron 1064 caracteres en el cuerpo
Origen Enlace
Marcos
  • 35.7k
  • 7
  • 36
  • 70

##Solución simple:

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>
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>

##Solución:

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>

##Solución simple:

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>
se añadieron 20 caracteres en el cuerpo
Origen Enlace
Marcos
  • 35.7k
  • 7
  • 36
  • 70
Loading
Origen Enlace
Marcos
  • 35.7k
  • 7
  • 36
  • 70
Loading