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

这里有两种方法，第二种是根据评论信息。

版本不修改数组

此版本等到数据有 "loaded"，然后将创建一个地图，该地图将用于 HTML 中计数的插值。

HTML

此按钮将切换计数 on/off:

<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.countMap1 = 'hello'; console.log($scope.countMap1); // -> 你好

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

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 上，因为它是从您的 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);
    })
  }

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

Answer 2

您可以在点击时准备这样的数组：

 $scope.showCount = function(){

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

}

working plunkar link

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);
};

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

我把一个 plknr 和例子放在一起： sample

AngularJS 如何在点击按钮时显示所有项目的数量？

How to display the count of all items on click of a button in AngularJS?

javascript

html

css

angularjs

angularjs-scope

版本不修改数组

HTML

JS

版本修改数组

HTML

JS