Wischen Sie Benutzermedienkarten nach links/rechts, um die nächste anzuzeigen

Question

Ich versuche, ein Widget, ng-repeats Benutzer Medienobjekte horizontal zu implementieren und ich sollte nach links/rechts wischen können, um die nächste Medienkarte zu enthüllen. Widget sollte so etwas wie diese

aussehen, wie Sie das Bild sehen

Der nächste Karte Avatar ist halb sichtbar, anspielend gibt es mehr Karten zu streichen.

dies alles, was ich derzeit haben ist .. Ich bin hier stecken

div class="media people-card-media col-xs-12" ng-repeat="item in cats"> 
     <div class="media-left "> 
      <div class="person-photo presence" > 
       <img class="media-object list__photo img-circle" ng-src="{{item.photo}}" /> 

      </div> 
     </div> 
     <div class="media-body list__body"> 
      <div class="people_name_title"> 
       <h4 class="media-heading title">{{item.name}}</h4> 

      </div> 
     </div> 
     <div class="media-right media-middle contacts-chat-call flex-it-align-top"> 
      <a style="margin-right: 10px;"> 
       call 
      </a> 

     </div> 
    </div> 

here die Plunker http://plnkr.co/edit/YESgpGIXQrK9sYl79FVI?p=preview

Answer 1

hier ein plunkr mit einer Arbeits Umsetzung ist.

http://plnkr.co/edit/wmIyCFM57hniZQ82Z8Ba?p=preview

Ich habe ngTouch und in der HTML ein ng-class und den Touch-Event-Handler.

<div class="media people-card-media col-xs-12" 
     ng-class="item.displayClass" 
     ng-repeat="item in heroes" 
     ng-click="gonext()" 
     ng-swipe-left="gonext()" 
     ng-swipe-right="goprev()"> 

Und im MainController, dreht sie durch die Zuweisung eine current Klasse zu ihm, und eine next-up und previous Klasse zu den Nachbarn aktives Element durch.

$scope.gonext = function() { 
    for (var i=0, len=$scope.heroes.length; i<len; i++) { 
    if ($scope.heroes[i].displayClass == 'current') { 
     $scope.heroes[i].displayClass = 'previous'; 
     if (i<len-1) $scope.heroes[i+1].displayClass = 'current'; 
     if (i<len-2) $scope.heroes[i+2].displayClass = 'next-up'; 
     i=len; 
    }; 
    }; 
}; 

Nur braucht eine bessere Handhabung der Grenzen.