Question

我有一个关于如何从嵌套的ng-repeat中选择随机项并将其设置为bootstrap carousel的问题。请看我的案例：

var products = [{
  "title" : "First product",
  "comments" : [ 
    {
        "body" : "1 comment",
        "author" : "user 1",
    }, 
    {
        "body" : "2 comment",
        "author" : "user 2",
    }
  ]
},
{
  "title" : "Second product",
  "comments" : [ 
    {
        "body" : "1 comment",
        "author" : "user 3",
    }, 
    {
        "body" : "2 comment",
        "author" : "user 5",
    }
  ]
}
]

和HTML代码

<div ng-repeat="product in products track by $index">  
   <div ng-repeat="comment in product.comments | limitTo: 1 | orderBy: main.random()" class="item {{::($index === 0 ? 'active' : '')}}"> 
      <p>{{comment.body}}</p>
      <p>{{comment.author}}</p> 
    </div>
</div>

随机功能

$scope.random = function(){ 
    return 0.5 - Math.random(); 
};

当然，实际上是比例子更多的评论和产品，但是你能帮助我如何在旋转木马中显示随机评论吗？

Answer 1

创建单独的函数以从随机评论中获取单个评论
在UI

这里的工作代码如下：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
  <script>
    (function() {

      var app = angular.module("testApp", ['ui.bootstrap']);
      app.controller('testCtrl', ['$scope', '$http', function($scope, $http) {
        $scope.products = [{"title":"First product","comments":[{"body":"1 comment","author":"user 1"},{"body":"3 comment","author":"user 3"},{"body":"4 comment","author":"user 4"},{"body":"5 comment","author":"user 5"},{"body":"6 comment","author":"user 6"}]},{"title":"Second product","comments":[{"body":"7 comment","author":"user 7"},{"body":"7 comment","author":"user 8"}]}];
        $scope.getRandomComment = function(comments){
          return comments[Math.floor(Math.random()*comments.length)];
        };
      }]);
    }());
  </script>
  <style></style>
</head>

<body ng-app="testApp">
  <div ng-controller="testCtrl">
    <div ng-repeat="product in products track by $index">  
      <div ng-init="product.randomComment = getRandomComment(product.comments)"> 
          <p>{{product.randomComment.body}}</p>
          <p>{{product.randomComment.author}}</p> 
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 2

如果您只有1个元素可循环播放，那么您不需要ng-repeat。所以我假设你想要一个可以返回几个随机元素的函数。

但您不能使用过滤器。 AngularJS过滤器不像JavaScript的数组.filter()方法，只是格式化结果。

但是你可以使用一个函数，它将数组作为参数和一些随机元素返回：

＆＃13;

angular.module('appModule', [])
  .controller('MyController', [function() {
    this.products = [{
        "title": "First product",
        "comments": [{
            "body": "1 comment",
            "author": "user 1",
          },
          {
            "body": "2 comment",
            "author": "user 2",
          }
        ]
      },
      {
        "title": "Second product",
        "comments": [{
            "body": "1 comment",
            "author": "user 3",
          },
          {
            "body": "2 comment",
            "author": "user 5",
          }
        ]
      }
    ];
    this.randomPick = function(arr, qty) {
        return arr.sort(function(){
           return 0.5 - Math.random()
        }).slice(0, qty);
    }
  }])
  .filter('randomComment', function() {
    return function(arr) {
      var res = arr[Math.floor(Math.random() * arr.length)];
      console.log(res);
      console.log('***');
      return res;
    };
  });
angular.bootstrap(window.document, ['appModule'], {
  strictDi: true
});

＆＃13;

.active {
  color: #f90;
}

＆＃13;

<div ng-controller="MyController as myCtrl">
  <div ng-repeat="product in myCtrl.products track by $index">
    <h2>{{product.title}}</h2>
    <div ng-repeat="comment in myCtrl.randomPick(product.comments, 1)" class="item {{::($index === 0 ? 'active' : '')}}">
      <p>{{comment.body}}</p>
      <p>{{comment.author}}</p>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

＆＃13;

在bootstrap轮播中显示来自嵌套ng-repat的项目

2 个答案: