lz430 lz430 - 2 days ago 6
AngularJS Question

In Angular count how many times an image is swiped right

I'm using Angular.js for a "tinder like" app. What I'm doing is showing a bunch of images from an array.

Here's a sample of the array:

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


Overall there's 6 in each "collection" and there are 7 collections. I'm showing the images at random. What I need to do is when 4 of the same collection is swiped right, to take them to a new page.

How can I count how many from each individual collection is swiped?

Answer

Assuming you know how to detect a swipe right event, I will answer the question as to how to count the values.

The idea is to keep an object to store the swipes for each collection & direction (if you're interested in keeping lefts vs. rights. If not, you can remove the left and right properties and simplify your data structure).

The structure would look like the following:

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

If you didn't care about counting left swipes, you could simplify the data structure like this:

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

Keep in mind this would change the $this.swipeLeft() and $this.swipeRight() functions in your controller, but that should be easy enough to figure out.

DEMO

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

Let me know if you have any questions! Hope this helps!

Comments