Question

我使用Angular.js作为＆＃34; tinder喜欢＆＃34;应用程序。我正在做的是从数组中显示一堆图像。

这是一个数组样本：

{
  thumbnail: 'images/thor_02.jpg',
  collection: 'Thoroughbred',
},{
  thumbnail: 'images/thor_03.jpg',
  collection: 'Rhapsody',
},{
  thumbnail: 'images/thor_04.jpg',
  collection: 'Chalet',

总的来说，每个＆＃34;集合中有6个＆＃34;有7个收藏品。我随机显示图像。我需要做的是当同一个集合中的4个向右滑动时，将它们带到一个新页面。

如何计算每个系列中有多少个被刷？

Answer 1

假设您知道如何检测向右滑动事件，我将回答有关如何计算值的问题。

我们的想法是保留一个对象来存储每个集合的滑动。方向（如果您有兴趣保持左派与权利。如果没有，您可以删除left和right属性并简化数据结构。

结构如下所示：

swipes = {
  "Thoroughbred": {
    left: 2,
    right: 4
  },
  "Rhapsody": {
    left: 1,
    right: 2
  } // ... you get the idea
}

如果你不关心计算左滑动，你可以像这样简化数据结构：

swipes = {
  "Thoroughbred": 4,
  "Rhapsody": 2 // ... you get the idea
}

请记住，这会更改控制器中的$this.swipeLeft()和$this.swipeRight()函数，但这应该很容易理解。

样本

＆＃13;

var app = angular.module("myApp", [])
  .controller("myCtrl", function() {
    var $this = this;
    var swipes = {};
    var images = [
      {
        thumbnail: 'images/thor_02.jpg',
        collection: 'Thoroughbred',
      },{
        thumbnail: 'images/thor_03.jpg',
        collection: 'Rhapsody',
      },{
        thumbnail: 'images/thor_04.jpg',
        collection: 'Chalet'
      }
    ];
    $this.currentImage = images[0];
    $this.swipeLeft = function() {
      if (swipes[$this.currentImage.collection]) {
        var collection = swipes[$this.currentImage.collection];
        if (collection.left) {
          collection.left += 1;
        } else {
          collection.left = 1;
        }
      } else {
        swipes[$this.currentImage.collection] = {
          left: 1
        };
      }
      $this.currentImage = images[(images.indexOf($this.currentImage) + 1) % images.length];
    };
    $this.swipeRight = function() {
      if (swipes[$this.currentImage.collection]) {
        var collection = swipes[$this.currentImage.collection];
        if (collection.right) {
          collection.right += 1;
        } else {
          collection.right = 1;
        }
      } else {
        swipes[$this.currentImage.collection] = {
          right: 1
        };
      }
      if (collection && collection.right && collection.right >= 4) {
        alert("Collection '" + $this.currentImage.collection + "' has been swiped right 4 times!");
      } else {
        $this.currentImage = images[(images.indexOf($this.currentImage) + 1) % images.length];
      }
    };
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl as Main">
  <button ng-click="Main.swipeLeft()">Swipe Left</button>
  <button ng-click="Main.swipeRight()">Swipe Right</button>
  <div class="current-image">
    <h4>Current Image</h4>
    <span ng-bind="'Thumbnail: ' + Main.currentImage.thumbnail"></span>
    <br/>
    <span ng-bind="'Collection: ' + Main.currentImage.collection"></span>
  </div>
</div>

＆＃13;

如果您有任何疑问，请与我们联系！希望这有帮助！

在角度计数中，向右滑动图像的次数

1 个答案:

样本