AngularJS - Как генерировать случайное значение для каждой ng-повторной итерации

Я пытаюсь создать случайные div div (.childBox) из twitter bootstrap, используя 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);
  };
}])

Я хочу создать другое целочисленное значение для boxSpan для каждого .childBox div, но все .childBox имеют одинаковое значение boxSpan. Хотя каждый раз, когда я обновляю страницу boxSpan, создается случайное значение.

Как я могу генерировать разные/случайные значения для каждой итерации ng-repeat?

Ответ 1

Просто вызовите функцию getRandomSpan() в свою область и вызовите ее в свой шаблон:

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

Ответ 2

В качестве альтернативы принятому ответу, поскольку вы, вероятно, будете повторно использовать эту функцию, вы можете превратить ее в фильтр для удобства:

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

Затем вы можете определить max и использовать его в любом месте приложения:

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

Ответ 3

Импровизация принятого ответа для предотвращения переполнения переполнения:

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>