Angular JS ng-repeat从数组中选择随机分组? [英] Angular JS ng-repeat choose random grouping from array?
问题描述
我有6个对象的数组。
I have an array of 6 objects.
我有一个带有ng-repeat的列表,我想在这6个项目中显示3个唯一的项目。
I have a list with an ng-repeat where I want to display 3 unique items from those 6 items.
每次刷新一次,它可能会拉3个不同的项目,但是如果没有,就可以了,唯一的是这3个项目之间不能有重复项。
One each refresh, it might pull 3 different items, but it's ok if it does not, the only thing is that the 3 cannot have duplicates amongst themselves.
例如,如果数组为 [红色,黄色,蓝色,绿色,紫色,青色,紫红色]
,则在刷新后我可以得到:
As an example, if the array is [red, yellow, blue, green, purple, cyan, fuchsia]
then on refresh I could get:
red,blue,green
purple,blue,yellow
fuchsia,green,red
等。如您所见,我不在乎那个蓝色连续出现两次,但是我绝对不能得到红色,蓝色,蓝色
。
etc. As you can see, I don't care that blue came up twice in a row there, but I must never get red, blue, blue
.
我有以下代码:
<ul class="ch-grid">
<li ng-repeat="user in home.testimonials|orderBy:random|limitTo: 3">
<div class="ch-item ch-img-1" style="background-image: url(assets/images/{{user.image}})">
<div class="ch-info">
<h3>{{user.quote}}</h3>
</div>
</div>
<h3 class="name">{{user.name}}</h3>
<p class="title">{{user.title}}</p>
</li>
</ul>
,它们在我的控制器中:
and them in my controller:
_this.random = function () {
return 0.5 - Math.random();
};
_this.testimonials = [
{
name: 'Sara Conklin',
title: 'SMB/SendPro UX Architect',
image: 'sara-conklin.jpg',
quote: 'Instead of inventing original solutions, we can leverage DS guidelines and components, save time, ensure great UX and promote consistency. '},
{
name: 'Jenn Church',
title: 'User Experience Designer',
image: 'jenn-church.jpg',
quote: 'The Design System has been a great tool in rapid prototyping, allowing me to get modern, on-brand interfaces put together quickly without having to start from scratch.'},
{
name: 'Peter Leeds',
title: 'Global Creative and Brand Activation',
image: 'peter-leeds.jpg',
quote: 'Design System provides the unified, consistent look needed to preserve and reinforce the integrity of our brand."'},
{
name: 'Marcy Goode',
title: 'Digital Marketing, Self Service & Content Management Leader',
image: 'marcy-goode.jpg',
quote: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, ipsam, mollitia in vitae nemo aliquam.'},
{
name: 'Clarence Hempfield',
title: 'Spectrum Spatial Analyst Product Manager',
image: 'clarence.jpg',
quote: 'Design System isn’t just about the interface. It’s about understanding how people are expecting to interact with your technology.'},
{
name: 'Aaron Videtto',
title: 'SendSuite Tracking Online Product Manager',
image: 'aaron.jpg',
quote: 'Customers of SendSuite Tracking Online have been up and running within 10-15 minutes. We were able to do this because of the Design System.'}
];
但不限于3,我得到几十个。
But it is not limiting to 3, I get dozens.
好,尝试使用@csschapker建议的过滤路径:
OK, trying the filter route as suggested by @csschapker:
(function () {
'use strict';
angular.module('pb.ds.home').filter('getThree', function () {
return function (array) {
var copy = angular.copy(array);
var sample = [];
while (sample.length < 3) {
var randomIndex = Math.floor(Math.random() * (copy.length));
sample.push(copy[randomIndex]);
}
return sample;
};
});
})();
和
<ul class="ch-grid">
<li ng-repeat="user in home.testimonials|filter:getThree">
<div class="ch-item ch-img-1" style="background-image: url(assets/images/{{user.image}})">
<div class="ch-info">
<h3>{{user.quote}}</h3>
</div>
</div>
<h3 class="name">{{user.name}}</h3>
<p class="title">{{user.title}}</p>
</li>
</ul>
这只是打印出所有6条。我一定错过了一些东西。
This simply prints out all 6. I must be missing something.
推荐答案
用户随机数和limitTo过滤器。
User random and limitTo filters.
<p ng-repeat="i in list|orderBy:random|limitTo:3">{{i}}</p>
这篇关于Angular JS ng-repeat从数组中选择随机分组?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!