Dev Faq
11
votes

Angularjs - Comment générer une valeur aléatoire pour chaque itération de la répétition NG

J'essaie de créer des divs de taille aléatoire de la taille (.childbox) de Twitter Bootstrap à l'aide d'angularjs. 

  <div ng-controller="HomeCtrl">
    <div class="motherBox" ng-repeat="n in news">
      <div class="childBox" class="col-md-{{boxSpan}} box">
        <a href="#" class="thumbnail">
          <img src="{{holderLink}}" height="200px" alt="100x100">
          <p class="tBlock"> {{n.title}} </p>
        </a>
      </div>
    </div>
  </div>

controller('HomeCtrl', ['$scope', '$http', function($scope,$http) {
  $http.get('news/abc.json').success(function(data) {
    $scope.news = data;
  });
  $scope.holderSize = 150;
  $scope.holderLink = 'http://placehold.it/'+$scope.holderSize+'x'+$scope.holderSize;
  $scope.boxSpan = getRandomSpan();

  function getRandomSpan(){
    return Math.floor((Math.random()*6)+1);
  };
}])

0 commentaires

3 Réponses :

25
votes

Appelez simplement Ajouter GetRandomspan () Code> Fonction à votre portée et appelez-la dans votre modèle: 

$scope.getRandomSpan = function(){
  return Math.floor((Math.random()*6)+1);
}

<div ng-controller="HomeCtrl">
  <div class="motherBox" ng-repeat="n in news">
    <div class="childBox" class="col-md-{{getRandomSpan()}} box">
      <a href="#" class="thumbnail">
        <img src="{{holderLink}}" height="200px" alt="100x100">
        <p class="tBlock"> {{n.title}} </p>
      </a>  
    </div>
  </div>
</div>

3 commentaires

Cela causera le débordement de la digeste, n'est-ce pas?

Oui, cela le cause dans mon cas.

Pour prévenir le débordement de la Digest: vous pouvez utiliser ng-init = 'rand = getrandomspan ()' et dans la classe: class = "col-md - {{rand}} case"

22
votes

Autre autre à la réponse acceptée, car vous êtes susceptible de réutiliser cette fonction, vous pouvez le transformer en un filtre pour plus de commodité: 

  <div ng-controller="HomeCtrl">
    <div class="motherBox" ng-repeat="n in news">
      <div class="childBox" class="col-md-{{6 | randomize}} box">
        <a href="#" class="thumbnail">
          <img src="{{holderLink}}" height="200px" alt="100x100">
          <p class="tBlock"> {{n.title}} </p>
        </a>
      </div>
    </div>
  </div>

0 commentaires
3
votes

improvisation de la réponse acceptée pour prévenir le débordement de la digeste: 

<div ng-controller="HomeCtrl">
  <div class="motherBox" ng-repeat="n in news">
    <div class="childBox" ng-init="initRand()" class="col-md-{{getRandomSpan()}} box">
      <a href="#" class="thumbnail">
        <img src="{{holderLink}}" height="200px" alt="100x100">
        <p class="tBlock"> {{n.title}} </p>
      </a>  
    </div>
  </div>
</div>

1 commentaires

Pas besoin d'utiliser la fonction de la portée - à nouveau sera digestible débordement. Il suffit de définir un nouveau val: ng-init = 'rand = initiateur ()' et en classe: classe = "Col-MD - {{Rand}} Box"

Articles qui pourrait vous intéresser :

Mélanger le vecteur dans R, mais les éléments identiques doivent avoir une distance minimale
Génération de bits aléatoires uniformes à l'aide d'une source de bits biaisés
Swift 4.2+ ensemence un générateur de nombres aléatoires
Meilleur moyen de générer U (1,5) à partir de U (1,3)?