Skip to content

Latest commit

 

History

History
60 lines (51 loc) · 1.36 KB

README.md

File metadata and controls

60 lines (51 loc) · 1.36 KB
Raw

Swipe to Remove

An angular directive to swipe elements away in order to remove them from a list. Built upon ngTouch's $swipe service.

Dependencies

  • jQuery
  • ngTouch
  • ngAnimate

Demo

Working plunkr demo here

Includes a yeoman generated demo for local testing

cd demo
npm install
bower install

run the server

grunt server

Usage

in HTML, use the item-swipe attribute in your ng-repeat and set the on-remove attribute to the appropriate method

<div class="container">
	<div ng-repeat="thing in things">
	  <div item-swipe on-remove="removeThing(thing)">
	    {{thing.name}}
	  </div>
	</div>
</div>

Event handling

Handle remove event in the controller however you like

$scope.removeThing = function(thing){
  $scope.things.splice($scope.things.indexOf(thing), 1);
};

Styling

  • ".swiper" is provided on the element to be swiped
  • ".undo-div" is provided on the element that temporarily replaces the swiper element

The ng-repeat should be wrapped in a container to prevent the animation from extending the page width:

.container {
  zoom: 1;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

Sponsered by AustinPost.org