| <html ng-app="ionicApp"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> | |
| <title>Side Menus</title> | |
| <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> | |
| <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> | |
| </head> | |
| <body ng-controller="MainCtrl"> | |
| <ion-nav-view></ion-nav-view> | |
| <script id="templates/event-menu.html" type="text/ng-template"> | |
| <ion-side-menus enable-menu-with-back-views="false"> | |
| <ion-side-menu-content> | |
| <ion-nav-bar class="bar-positive"> | |
| <ion-nav-back-button> | |
| </ion-nav-back-button> | |
| <ion-nav-buttons side="left"> | |
| <button class="button button-icon button-clear ion-navicon" menu-toggle="left"> | |
| </button> | |
| </ion-nav-buttons> | |
| </ion-nav-bar> | |
| <ion-nav-view name="menuContent"></ion-nav-view> | |
| </ion-side-menu-content> | |
| <ion-side-menu side="left"> | |
| <ion-header-bar class="bar-assertive"> | |
| <h1 class="title">Left Menu</h1> | |
| </ion-header-bar> | |
| <ion-content> | |
| <ul class="list"> | |
| <!-- Note each link has the 'menu-close' attribute so the menu auto closes when clicking on one of these links --> | |
| <a href="#/event/check-in" class="item" menu-close>Check-in</a> | |
| <a href="#/event/attendees" class="item" menu-close>Attendees</a> | |
| </ul> | |
| </ion-content> | |
| </ion-side-menu> | |
| </ion-side-menus> | |
| </script> | |
| <script id="templates/home.html" type="text/ng-template"> | |
| <ion-view view-title="Welcome"> | |
| <ion-content class="padding"> | |
| <p>Swipe to the right to reveal the left menu.</p> | |
| <p>(On desktop click and drag from left to right)</p> | |
| </ion-content> | |
| </ion-view> | |
| </script> | |
| <script id="templates/check-in.html" type="text/ng-template"> | |
| <ion-view view-title="Event Check-in"> | |
| <ion-content> | |
| <form class="list" ng-show="showForm"> | |
| <div class="item item-divider"> | |
| Attendee Info | |
| </div> | |
| <label class="item item-input"> | |
| <input type="text" placeholder="First Name" ng-model="attendee.firstname"> | |
| </label> | |
| <label class="item item-input"> | |
| <input type="text" placeholder="Last Name" ng-model="attendee.lastname"> | |
| </label> | |
| <div class="item item-divider"> | |
| Shirt Size | |
| </div> | |
| <ion-radio ng-repeat="shirtSize in shirtSizes" ng-value="shirtSize.value" ng-model="attendee.shirtSize"> | |
| {{ shirtSize.text }} | |
| </ion-radio> | |
| <div class="item item-divider"> | |
| Lunch | |
| </div> | |
| <ion-toggle ng-model="attendee.vegetarian"> | |
| Vegetarian | |
| </ion-toggle> | |
| <div class="padding"> | |
| <button class="button button-block" ng-click="submit()">Checkin</button> | |
| </div> | |
| </form> | |
| <div ng-hide="showForm"> | |
| <pre ng-bind="attendee | json"></pre> | |
| <a href="#/event/attendees">View attendees</a> | |
| </div> | |
| </ion-content> | |
| </ion-view> | |
| </script> | |
| <script id="templates/attendees.html" type="text/ng-template"> | |
| <ion-view view-title="Event Attendees"> | |
| <ion-content> | |
| <div class="list"> | |
| <ion-toggle ng-repeat="attendee in attendees | orderBy:'firstname' | orderBy:'lastname'" ng-model="attendee.arrived" ng-change="arrivedChange(attendee)"> | |
| {{ attendee.firstname }} {{ attendee.lastname }} | |
| </ion-toggle> | |
| <div class="item item-divider"> | |
| Activity | |
| </div> | |
| <div class="item" ng-repeat="msg in activity"> | |
| {{ msg }} | |
| </div> | |
| </div> | |
| </ion-content> | |
| </ion-view> | |
| </script> | |
| </body> | |
| </html> |
| angular.module('ionicApp', ['ionic']) | |
| .config(function($stateProvider, $urlRouterProvider) { | |
| $stateProvider | |
| .state('eventmenu', { | |
| url: "/event", | |
| abstract: true, | |
| templateUrl: "templates/event-menu.html" | |
| }) | |
| .state('eventmenu.checkin', { | |
| url: "/check-in", | |
| views: { | |
| 'menuContent': { | |
| templateUrl: "templates/check-in.html", | |
| controller: "CheckinCtrl" | |
| } | |
| } | |
| }) | |
| .state('eventmenu.home', { | |
| url: "/home", | |
| views: { | |
| 'menuContent': { | |
| templateUrl: "templates/home.html" | |
| } | |
| } | |
| }) | |
| .state('eventmenu.attendees', { | |
| url: "/attendees", | |
| views: { | |
| 'menuContent': { | |
| templateUrl: "templates/attendees.html", | |
| controller: "AttendeesCtrl" | |
| } | |
| } | |
| }) | |
| $urlRouterProvider.otherwise("/event/home"); | |
| }) | |
| .controller('MainCtrl', function($scope, $ionicSideMenuDelegate) { | |
| $scope.attendees = [{ | |
| firstname: 'Nicolas', | |
| lastname: 'Cage' | |
| }, { | |
| firstname: 'Jean-Claude', | |
| lastname: 'Van Damme' | |
| }, { | |
| firstname: 'Keanu', | |
| lastname: 'Reeves' | |
| }, { | |
| firstname: 'Steven', | |
| lastname: 'Seagal' | |
| }]; | |
| $scope.toggleLeft = function() { | |
| $ionicSideMenuDelegate.toggleLeft(); | |
| }; | |
| }) | |
| .controller('CheckinCtrl', function($scope) { | |
| $scope.showForm = true; | |
| $scope.shirtSizes = [{ | |
| text: 'Large', | |
| value: 'L' | |
| }, { | |
| text: 'Medium', | |
| value: 'M' | |
| }, { | |
| text: 'Small', | |
| value: 'S' | |
| }]; | |
| $scope.attendee = {}; | |
| $scope.submit = function() { | |
| if (!$scope.attendee.firstname) { | |
| alert('Info required'); | |
| return; | |
| } | |
| $scope.showForm = false; | |
| $scope.attendees.push($scope.attendee); | |
| }; | |
| }) | |
| .controller('AttendeesCtrl', function($scope) { | |
| $scope.activity = []; | |
| $scope.arrivedChange = function(attendee) { | |
| var msg = attendee.firstname + ' ' + attendee.lastname; | |
| msg += (!attendee.arrived ? ' has arrived, ' : ' just left, '); | |
| msg += new Date().getMilliseconds(); | |
| $scope.activity.push(msg); | |
| if ($scope.activity.length > 3) { | |
| $scope.activity.splice(0, 1); | |
| } | |
| }; | |
| }); |
| body { | |
| cursor: url('http://ionicframework.com/img/finger.png'), auto; | |
| } |