AngularJS - Her ng yineleme yineleme için rasgele değer nasıl oluşturulur?

Question

AngularJS kullanarak twitter bootstrap'in rasgele span boyutlu div (.childBox) oluşturmaya çalışıyorum.

<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); 
    }; 
}]) 

Her .childBox div boxSpan için farklı tamsayı değeri oluşturmak istiyor ancak tüm .childBox aynı boxSpan değere sahip. Her ne kadar sayfa yenilendiğime rağmen boxSpan rastgele bir değer oluşturur.

Her ng tekrarlı yineleme için nasıl farklı/rasgele değerler üretebilirim?

Answer 1

Sadece kapsamına getRandomSpan() işlev eklemek arayacak ve şablonda diyoruz: Eğer bu fonksiyonu yeniden olasıdır çünkü, bir haline getirebilirsin, kabul edilen yanıt alternatif olarak

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

Answer 2

kolaylık için filtre:

angular.module('myApp').filter('randomize', function() { 
    return function(input, scope) { 
    if (input!=null && input!=undefined && input > 1) { 
     return Math.floor((Math.random()*input)+1); 
    } 
    } 
}); 

Ardından, max tanımlayabilir ve uygulamanızda her yerde kullanabilirsiniz:

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

Kabul cevabın 0

Answer 3

Doğaçlama taşması sindirmek önlemek için:

var rand = 1; 
$scope.initRand = function(){ 
    rand = Math.floor((Math.random()*6)+1) 
} 

$scope.getRandomSpan = function(){ 
    return rand; 
} 

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