AngularJS - Cách tạo giá trị ngẫu nhiên cho mỗi lần lặp lại ng-

Question

Tôi đang cố gắng tạo các div có kích thước ngẫu nhiên (.childBox) của trình khởi động twitter bằng 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); 
    }; 
}]) 

Tôi muốn tạo giá trị số nguyên khác nhau cho boxSpan cho mỗi div .childBox nhưng tất cả .childBox đều có cùng giá trị hộp. Mặc dù mỗi khi tôi làm mới trang boxSpan tạo ra giá trị ngẫu nhiên.

Làm cách nào tôi có thể tạo ra giá trị khác nhau/ngẫu nhiên cho mỗi lần lặp lại ng-lặp lại?

Answer 1

Chỉ cần gọi thêm getRandomSpan() chức năng để phạm vi của bạn và gọi nó trong mẫu của bạn:

$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

Để thay thế cho câu trả lời được chấp nhận, kể từ khi bạn đang có khả năng tái sử dụng chức năng này, bạn có thể biến nó thành một lọc cho tiện theo dõi:

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

Sau đó, bạn có thể xác định tối đa và sử dụng nó bất cứ nơi nào trên ứng dụng của bạn:

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

Answer 3

Ngẫu hứng của câu trả lời chấp nhận để ngăn ngừa tiêu hóa tràn:

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>