javascript - AngularJS:基于变量计数输出 HTML
问题描述
我有一个数组slides
,其中包含变量stars
。我需要获取stars
每张幻灯片上的值,然后使用该数字为每张幻灯片重复一个 HTML 字符串。
我可以得到 的值stars
,但它会遍历所有 6 张幻灯片,并提供它们的值 6 次。
我只需要获得stars
1 次的所有值。
var slides = [
{
'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER',
'stars' : 4
},
{
'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER',
'stars' : 3
},
{
'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER',
'stars' : 2
},
{
'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER',
'stars' : 1
},
{
'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER',
'stars' : 5
},
{
'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER',
'stars' : 2
}
];
$scope.addStars = function(){
i = 1;
for (i=1; i<slides.length; i++) {
var starsCount = slides[i].stars;
var starsHTML = '<a href="#">☆</a>';
starsFinal = starsHTML.repeat(starsCount);
console.log(starsFinal);
}
}
解决方案
你可以这样做:
$scope.slides = [
{
'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER',
'stars' : 4
},
{
'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER',
'stars' : 3
},
{
'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER',
'stars' : 2
},
{
'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER',
'stars' : 1
},
{
'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER',
'stars' : 5
},
{
'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER',
'stars' : 2
}
];
$scope.addStars = function(startCount) {
return Array(startCount).fill().map(function() {
return '<a href="#">☆</a>';
}).join('');
}
<div ng-repeat="slide in slides">
<div ng-bind-html="addStars(slide.stars)"></div>
</div>
推荐阅读
- symfony - Symfony 中有很多可选参数的路由
- amazon-web-services - aws:SourceAccount 和 aws:SourceOwner AWS SNS 访问策略语句有什么区别
- mysql - 选择具有多种类型的电影
- ios - 当 BLE 设备在范围内时在后台启动应用程序
- apache - Apache 在出现问题时停止所有服务器
- python - TensorFlow 的镜像策略、批量大小和反向传播
- r - 如果 R 中的数据框中有重复的值和 id,如何删除整行
- php - Laravel - 缺少路由所需的参数
- javascript - ThreeJS:将边缘几何应用于 ArrowHelper
- python - 使用 image_dataset_from_directory 加载灰度 png 返回一个 3 通道张量