Swiping Cards with menu


#1

Hello everyone,

I want to put a sidemenu in this code, but every time i do it, I get a whole blank page… This happens when I change the app.js code. ¿Can anyone help me with this?

index.html:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title></title>

  <link href="lib/ionic/css/ionic.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">

  <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

  <!-- ionic/angularjs js -->

  <script src="lib/ionic/js/ionic.bundle.js"></script>

  <!-- cordova script (this will be a 404 during development) -->
  <script src="cordova.js"></script>

  <!-- your app's js -->
  <script src="js/app.js"></script>
  <script src="js/ionic.swipecards.js"></script>
  
</head>

<body ng-app="starter" no-scroll="">

  <ion-pane ng-controller="CardsCtrl">
    <ion-header-bar class="bar-transparent">
        <h1 class="title">Help Out</h1>
      </ion-header-bar>

    <swipe-cards>
      <swipe-card on-card-swipe="cardSwiped()" id="start-card">
        Deslize para empezar
      </swipe-card>
      <swipe-card ng-repeat="card in cards" on-destroy="cardDestroyed($index)" on-card-swipe="cardSwiped($index)">
        <div ng-controller="CardCtrl">
          <div class="title">
            {{card.title}}
          </div>
          <div class="image">
            <img ng-src="{{card.image}}">
          </div>
          <div class="button-bar">
            <button class="button button-clear button-positive" ng-click="goAway()">Verdadero</button>
            <button class="button button-clear button-positive" ng-click="goAway()">Falso</button>
          </div>
        </div>
      </swipe-card>
    </swipe-cards>
  </ion-pane>
</body>

</html>

app.js

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic', 'ionic.contrib.ui.cards'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})



.directive('noScroll', function($document) {

  return {
    restrict: 'A',
    link: function($scope, $element, $attr) {

      $document.on('touchmove', function(e) {
        e.preventDefault();
      });
    }
  }
})


.controller('CardsCtrl', function($scope, $ionicSwipeCardDelegate) {
  var cardTypes = [{
    title: 'Swipe down to clear the card',
    image: 'img/pic.png'
  }, {
    title: '¿Es esta la bandera española?',
    image: 'img/pic.jpeg'
  }, {
    title: '¿Es la hierba verde?',
    image: 'img/pic2.png'
  }, {
    title: 'What beach is this?',
    image: 'img/pic3.png'
  }, {
    title: '¿Es el cielo azul?',
    image: 'img/pic4.png'
  }];

  $scope.cards = Array.prototype.slice.call(cardTypes, 0, 0);

  $scope.cardSwiped = function(index) {
    $scope.addCard();
  };

  $scope.cardDestroyed = function(index) {
    $scope.cards.splice(index, 1);
  };

  $scope.addCard = function() {
    var newCard = cardTypes[Math.floor(Math.random() * cardTypes.length)];
    newCard.id = Math.random();
    $scope.cards.push(angular.extend({}, newCard));
  }
})

.controller('CardCtrl', function($scope, $ionicSwipeCardDelegate) {
  $scope.goAway = function() {
    var card = $ionicSwipeCardDelegate.getSwipeableCard($scope);
    card.swipe();
  };
});

#2

I don’t see any code for the side menu or states. Maybe I am misunderstanding you, but if you are looking to implement an Ionic Sidemenu there is a blog post on it here: http://mcgivery.com/understanding-ionics-side-menu/

Please provide a working code example (codepen, plunkr, etc) of what you have tried so we can better assist you.