hongbojing
5/21/2016 - 8:54 PM

From http://www.tutorialspoint.com/angular_material/angular_material_quick_guide.htm

<html lang="en" >
   <head>
      <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
	  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	  <style>
         .swipeContainer .demo-swipe {
            padding: 20px 10px; 			
         }
         .swipeContainer .no-select {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none; 
         }
	  </style>
      <script language="javascript">
          angular
            .module('firstApplication', ['ngMaterial'])
            .controller('swipeController', swipeController);

          function swipeController ($scope) {
             $scope.onSwipeLeft = function(ev) {
                alert('Swiped Left!');
             };
             $scope.onSwipeRight = function(ev) {
                alert('Swiped Right!');
             };
             $scope.onSwipeUp = function(ev) {
                alert('Swiped Up!');
             };
             $scope.onSwipeDown = function(ev) {
                alert('Swiped Down!');
             };
          }	  
      </script>      
   </head>
   <body ng-app="firstApplication"> 
      <md-card>
         <div id="swipeContainer" ng-controller="swipeController as ctrl" layout="row" ng-cloak>
            <div flex>
               <div class="demo-swipe" md-swipe-left="onSwipeLeft()">
                  <span class="no-select">Swipe me to the left</span>
                  <md-icon md-font-icon="android" aria-label="android"></md-icon>
               </div>
               <md-divider></md-divider>
               <div class="demo-swipe" md-swipe-right="onSwipeRight()">
                  <span class="no-select">Swipe me to the right</span>
               </div>
            </div>
            <md-divider></md-divider>
            <div flex layout="row">
               <div flex layout="row" layout-align="center center"
                  class="demo-swipe" md-swipe-up="onSwipeUp()">
                  <span class="no-select">Swipe me up</span>
               </div>
               <md-divider></md-divider>
               <div flex layout="row" layout-align="center center"
                  class="demo-swipe" md-swipe-down="onSwipeDown()">
                  <span class="no-select">Swipe me down</span>
               </div>
            </div>
         </div>
	  </md-card>
   </body>
</html>