我在旋转木马上说了9个项目。
我想在旋转木马图像下面显示单个项目的数量。
我创建了一个用于演示此问题的Plunker。
HTML CODE
<head>
<script data-require="angular.js@1.2.19" data-semver="1.2.19" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js">
</script>
<script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="http://vasyabigi.github.io/angular-slick/bower_components/slick-carousel/slick/slick.css" />
<script src="http://vasyabigi.github.io/angular-slick/bower_components/slick-carousel/slick/slick.js"></script>
<script src="angular-slick.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="appController">
<h1>Hello Plunker!</h1>
<button type="button" ng-click="showCount()">Show count of all items</button>
<slick ng-if="dataLoaded" init-onload="false" data="dataLoaded" slides-to-show="3" dots="true">
<div ng-repeat="item in items">
<span>
<img ng-src="{{ item.imgSrc }}" alt="{{ item.catId}}" />
</span>
<span>{{ item.catId }}</span>
</div>
</slick>
JS CODE
var app = angular.module("slick-example", ["slick"]);
app.controller('appController', function($scope, $timeout) {
$scope.items = [];
// simulate that the data is loaded from a remote source
$timeout(function() {
$scope.items = [{
imgSrc: 'http://placekitten.com/325/325',
catId: '1'
}, {
imgSrc: 'http://placekitten.com/g/325/325',
catId: '2'
}, {
imgSrc: 'http://placekitten.com/325/325',
catId: '3'
}, {
imgSrc: 'http://placekitten.com/g/325/325',
catId: '4'
}, {
imgSrc: 'http://placekitten.com/325/325',
catId: '5'
}, {
imgSrc: 'http://placekitten.com/g/325/325',
catId: '6'
}, {
imgSrc: 'http://placekitten.com/325/325',
catId: '7'
}, {
imgSrc: 'http://placekitten.com/g/325/325',
catId: '8'
}, {
imgSrc: 'http://placekitten.com/325/325',
catId: '9'
}];
$scope.countItem = [{
"catId": 1,
"availableCount": 2
}, {
"catId": 2,
"availableCount": 3
}, {
"catId": 3,
"availableCount": 4
}, {
"catId": 4,
"availableCount": 2
}, {
"catId": 5,
"availableCount": 1
}, {
"catId": 6,
"availableCount": 5
}, {
"catId": 7,
"availableCount": 3
}, {
"catId": 8,
"availableCount": 2
}, {
"catId": 9,
"availableCount": 1
}];
// update the dataLoaded flag after the data has been loaded
// i dont know why but its important that the flag doesnt get initialized in an previous step like $scope.dataLoaded = false;
$scope.dataLoaded = true;
}, 2000);
$scope.showCount = function() {}
});
当点击按钮（按钮 - 显示单个项目的数量）时，我试图显示旋转木马中每个图像下方的单个项目的数量，但我无法找到这样做的方法。点击按钮计数将显示所有项目
请参考Plunker（我只使用AngularJS和vanilla JS，没有Jquery）
请帮助我如何在每张图片下面显示转盘的各个项目的数量
答案 0 :(得分：1)
以下是两种方式，第二种方式基于评论信息。
此版本等待数据“加载”，然后创建一个地图，用于HTML中计数的插值。
此按钮将打开/关闭计数：
<button type="button" ng-click="showCount = !showCount">Toggle Count</button>
您希望在ng-repeat：
<span ng-if="showCount">Count of Items: {{ countMap[$index] }}</span>
有关$index的更多信息，请查看ng-repeat上的文档。基本上，它告诉你数组中索引（位置）当前重复元素的来源。
在控制器的根目录中：
// Create a mapping of array position : count
$scope.countMap = {};
这使我们可以轻松地查看数据。例如：
$ scope.countMap 1 ='你好'; 的console.log（$ scope.countMap 1）; // - ＆gt;喂
然后，在$ timeout之后，一旦它解决了（意味着超时，http请求完成等）：
$timeout(function() {
// Abbreviated, not including items.
}, 2000).then(function() {
// After resolve, assuming you are calling an API in real implementation
// Iterate through the returned items, and add the count
// to the array pos : count mapping
for (var i = 0; i < $scope.items.length; i++) {
$scope.countMap[i] = getCountFor($scope.items[i].catId);
}
});
**另外值得注意的是**，你设置$scope.dataLoaded = true，但它在超时范围内。它应该进入.then(function() {}以确保在承诺解决之前不会设置它。
然后，来自以下修改版本的原始getCountFor（id）函数：
function getCountFor(id) {
for (var i = 0; i < $scope.countItem.length; i++) {
if ($scope.countItem[i].catId == id) {
return $scope.countItem[i].availableCount;
}
}
}
https://plnkr.co/edit/UOY7WONh6TUCBRrZYnvZ?p=preview
这应该可以解决问题。单击“show count ...”时，该函数将迭代$ scope.items中的每个cat对象，并调用getCountFor(id)并通过将catId与每个数组中的对象相关联来附加availableCount值。
<div ng-repeat="item in items">
<span>
<img ng-src="{{ item.imgSrc }}" alt="{{ item.catId}}" />
</span>
<span>{{ item.catId }}</span>
<span> Count of Items: {{ item.availableCount }}</span>
</div>
这是一个用于分离代码问题的函数。它需要id作为参数。然后它从{0}开始递增i，直到i的值是$scope.countItem数组的长度。对于数组中的每个位置，都有一个项目。如果传递给函数的id的值与数组位置catId处的对象的i的值匹配，则返回可用计数的值。
function getCountFor(id) {
for (var i = 0; i < $scope.countItem.length; i++) {
if ($scope.countItem[i].catId == id) {
return $scope.countItem[i].availableCount;
}
}
}
此功能在$scope上，因为它是从您的UI调用的。调用时，它会遍历$scope.items中的每个项目，并在该项目上设置一个名为availableCount的新属性。它会将$scope.items中的每个项目呈现如下：
{
imgSrc: 'http://placekitten.com/325/325',
catId: '1',
availableCount: 0
}
实际的showCount（）函数：
$scope.showCount = function() {
$scope.items.forEach(function(item) {
item.availableCount = getCountFor(item.catId);
})
}
答案 1 :(得分：1)
您可以点击这样准备这样的数组：
$scope.showCount = function(){
angular.forEach($scope.countItem,function(val,key){
$scope.count[val.catId] = val.availableCount;
});
}
答案 2 :(得分：0)
您需要遍历项目以找到另一个数组中的idCat。和子循环，找到匹配ID，并获取availableCount。
您需要在showCount函数
中执行此操作<强> HTML 显示所有项目的数量
function dbInsert(event_arr) {
$.ajax({
url: "http://localhost:5000/insertdata",
type: "POST",
data: JSON.stringify(event_arr),
contentType: "application/json",
success: function(events) {
console.log("TestInsert was successfully executed");
},
error: function(textStatus, errorThrown) {
console.error("The following error occurred: " + textStatus, errorThrown);
}
});
}
<强>控制器
<slick ng-if="dataLoaded" init-onload="false" data="dataLoaded" slides-to-show="3" dots="true">
<div ng-repeat="item in itemsCopy">
<span>
<img ng-src="{{ item.imgSrc }}" alt="{{ item.catId}}" />
</span>
<span>{{ item.catId }} {{ 'count: '+ item.availableCount }}</span>
</div>
</slick>
点击按钮时，计数将显示计数。
我把plknr放在这个例子中： sample