I am trying to implement a widget which ng-repeats
user media objects horizontally and I should be able to swipe left/right to reveal the next media card. widget should look something like this
As you can see the image
The next card avatar is half visible, hinting there are more cards to swipe.
this is all i have currently.. i am stuck here
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>
heres the plunker http://plnkr.co/edit/YESgpGIXQrK9sYl79FVI?p=preview
Here is a plunkr with a working implementation.
http://plnkr.co/edit/wmIyCFM57hniZQ82Z8Ba?p=preview
I added ngTouch and in the HTML a ng-class
and the touch event handlers.
<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()">
And in the MainController, it flips through active item by assigning a current
class to it, and a next-up
and previous
class to the neighbors.
$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;
};
};
};
Only needs a better handling of the boundaries.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.