单击AngularJS中的按钮时如何显示所有项目的计数？

Question

我说轮播上有9个项目。

我想在轮播图片下方显示单个项目的数量。

我创建了一个Plunker来演示这个问题。

HTML代码

<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代码

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）

请帮助我如何在每个图像下方显示轮播的单个项目数

Answer 1

这有两种方式，第二种基于评论信息。

版本未修改数组

此版本将等待数据“加载”，然后将创建一个映射，该映射将用于HTML计数的内插值。

的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的文档。 基本上，它告诉您当前重复元素来自的数组中的索引（位置）。

JS

在控制器的根目录中：

  // Create a mapping of array position : count
  $scope.countMap = {};

这使我们以后可以轻松查找数据。 例如：

$ scope.countMap 1 ='你好'; console.log（$ scope.countMap 1 ）; //->你好

然后，在您的$ 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

版本修改数组

这应该可以解决问题。 当您单击“显示计数...”时，该函数将遍历$ scope.items中的每个猫对象，并调用getCountFor(id)并附加通过关联每个数组中的对象的catId找到的availableCount值。

的HTML

  <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>

JS

这是用于分离代码关注点的功能。 它以id为参数。 然后，它使i递增，从0开始，一直到i的值是$scope.countItem数组的长度。 对于数组中的每个位置，都有一个项目。 如果传递给该函数的id的值与该数组在位置i处的对象的catId的值匹配，则返回可用计数的值。

  function getCountFor(id) {
    for (var i = 0; i < $scope.countItem.length; i++) {
      if ($scope.countItem[i].catId == id) {
        return $scope.countItem[i].availableCount;
      }
    }
  }

该函数在$scope因为它是从用户界面调用的。 调用时，它将遍历$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);
    })
  }

https://plnkr.co/edit/2uLdLgVtsjbT6v4R0DWi?p=预览

Answer 2

您可以单击以下命令来准备一个数组：

 $scope.showCount = function(){

  angular.forEach($scope.countItem,function(val,key){
    $scope.count[val.catId] = val.availableCount;
  });

}

工作pl链接

Answer 3

您需要遍历所有项以找到另一个数组中的idCat。 和子循环，以找到匹配ID，并获取availableCount。

您需要在showCount函数中执行此操作

HTML显示所有项目的计数

<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>

控制者

$scope.showCount = function(){

 $scope.itemsCopy = $scope.item;

angular.forEach($scope.itemsCopy, function(value, index){

    for(var i = 0; i < $scope.countItem.length; i++){
      console.log(value, $scope.countItem[i].catId);
      if(parseInt(value.catId) === $scope.countItem[i].catId ){
        value.availableCount = $scope.countItem[i].availableCount
      } 
    }
});
console.log($scope.itemsCopy);
};

当单击按钮asid时，计数将显示计数。

我把一个plknr与示例：示例

单击AngularJS中的按钮时如何显示所有项目的计数？

问题描述

3 个解决方案

解决方案1
1 已采纳 2017-08-10 17:00:23

版本未修改数组

的HTML

JS

版本修改数组

的HTML

JS

解决方案2
1 2017-08-10 17:00:27

解决方案3
0 2017-08-10 17:13:03

单击AngularJS中的按钮时如何显示所有项目的计数？

问题描述

3 个解决方案

解决方案1 1 已采纳 2017-08-10 17:00:23

版本未修改数组

的HTML

JS

版本修改数组

的HTML

JS

解决方案2 1 2017-08-10 17:00:27

解决方案3 0 2017-08-10 17:13:03

解决方案1
1 已采纳 2017-08-10 17:00:23

解决方案2
1 2017-08-10 17:00:27

解决方案3
0 2017-08-10 17:13:03