ngRepeat获取随机类和每个循环的数字

时间:2015-10-28 19:51:38

标签: angularjs ng-repeat

我希望每次ng-repeat循环时从列表中获取一个随机类和一个数字。

div.feed-item(ng-repeat='feedItem in activities'
                                ng-class="{getRandomClass(): $index%4==0}")
  div.explanation.ng-cloak        
                      a(href='profile/{{getUsername(feedItem.uorb_id)}}') {{getName(feedItem.uorb_id)}}
                      |  {{feedItem.actName}}    
                      a(ng-if="feedItem.actType == 'FOLLOW'" ng-repeat="p in feedItem.actBody.actedOn" href="profile/{{p.username}}")  {{p.fullName}}
                      | .      
                    div.datetime.ng-cloak           
                      span(am-time-ago='{{feedItem.actDate}}')
                    div.addpicture.x1(ng-if="feedItem.actType == 'IMG_ADD' && feedItem.actBody.actedOn.length == 1").ng-cloak
                      img.picture(ng-src='{{feedItem.actBody.actedOn[0].mediaUrl}}')

                    div.addpicture.x2(ng-if="feedItem.actType == 'IMG_ADD' && feedItem.actBody.actedOn.length == 2").ng-cloak
                      img.picture(ng-repeat="pic in feedItem.actBody.actedOn" 
                                  ng-src='{{pic.mediaUrl}}')      

                    //div.addpicture.x3(ng-if="feedItem.actType == 'IMG_ADD' && feedItem.actBody.actedOn.length == 3").ng-cloak
                      img.picture(ng-repeat="pic in feedItem.actBody.actedOn" 
                                  ng-src='{{pic.mediaUrl}}')
                    div.addpicture(ng-if="feedItem.actType == 'IMG_ADD'"
                                   ng-class="{{rand_class}}").ng-cloak
                                     img.picture(ng-repeat="pic in feedItem.actBody.actedOn | range: rand_num" 
                                  ng-src='{{pic.mediaUrl}}')      

控制器

$scope.classes = ["x3 highlighted",'x4', 'x4 highlighted', 'x5 highlighted', 'x6 highlighted', 'x8 highlighted'];
    $scope.getRandomClass = function(){
      var rand_num =  Math.floor(Math.random() * $scope.classes.length);
      $scope.rand_class = $scope.classes[rand_num];
      $scope.rand_num = rand_num;
      console.log($scope.rand_class, $scope.rand_num);
    };

现在,无论我尝试什么,我都会得到dupesinfdig。 我怎么能做到这一点?

更新 我也尝试这样做: 的

div.feed-item(ng-repeat='feedItem in activities track by $index'
                                ng-class="getRandomClass(feedItem)")
                    div.explanation.ng-cloak        
                      a(href='profile/{{getUsername(feedItem.uorb_id)}}') {{getName(feedItem.uorb_id)}}
                      |  {{feedItem.actName}}    
                      a(ng-if="feedItem.actType == 'FOLLOW'" ng-repeat="p in feedItem.actBody.actedOn" href="profile/{{p.username}}")  {{p.fullName}}
                      | .      
                    div.datetime.ng-cloak           
                      span(am-time-ago='{{feedItem.actDate}}')
                    div.addpicture.x1(ng-if="feedItem.actType == 'IMG_ADD' && feedItem.actBody.actedOn.length == 1").ng-cloak
                      img.picture(ng-src='{{feedItem.actBody.actedOn[0].mediaUrl}}')

                    div.addpicture.x2(ng-if="feedItem.actType == 'IMG_ADD' && feedItem.actBody.actedOn.length == 2").ng-cloak
                      img.picture(ng-repeat="pic in feedItem.actBody.actedOn" 
                                  ng-src='{{pic.mediaUrl}}')      

                    //div.addpicture.x3(ng-if="feedItem.actType == 'IMG_ADD' && feedItem.actBody.actedOn.length == 3").ng-cloak
                      img.picture(ng-repeat="pic in feedItem.actBody.actedOn" 
                                  ng-src='{{pic.mediaUrl}}')
                    div.addpicture(ng-if="feedItem.actType == 'IMG_ADD'"
                      class="{{rand_class1}} {{rand_class2}}").ng-cloak
                        img.picture(ng-repeat="pic in newFeedItemActedOn track by $index"
                                  ng-src='{{pic.mediaUrl}}')  

控制器

$scope.classes = ["x3 highlighted", 'x4 highlighted', 'x5 highlighted', 'x6 highlighted', 'x8 highlighted'];
$scope.getRandomClass = function(feedItem){
  var rand_num =  Math.floor(Math.random() * $scope.classes.length);
  $scope.rand_class1 = $scope.classes[rand_num].split(" ")[0];
  $scope.rand_class2 = $scope.classes[rand_num].split(" ")[1];
  $scope.randnum = $scope.rand_class1[1];
  var newFeedItemActedOn = feedItem.actBody.actedOn.splice(0, $scope.randnum);
  console.log(newFeedItemActedOn);
  console.log($scope.rand_class1);
  return true;
};

0 个答案:

没有答案