CODEWITHSUNDEEP
angularjsionic-framework
Jon
Jon

Reputation: 43

How Do I Combine Views (UI)?

Since I'm a little weak with Javascript and still learning Angular. I'm having trouble trying to combine a couple of UI's, not all at once of course. Let me explain what I'm trying to do.

I have a sidemenu and I want to add a swipe card page when I tap on the swipe page in my menu. See my image below. enter image description here

Having problem wrapping my head around how Angular does things, so any pointers & tips would be appreciative.

Upvotes: 0

Views: 236

Answers (1)

Andrew McGivery
Andrew McGivery

Reputation: 1400

Is this what you are looking for?

http://codepen.io/andrewmcgivery/pen/bqEeI

Basically, to mix the two together, the ion-pane that contains the page of the swipe cards has to be in an ion-view.

<ion-view title="Welcome">
 <ion-pane ng-controller="CardsCtrl">

  <swipe-cards on-card-swipe="onSwipe($event)">

  <swipe-cards>
    <swipe-card on-card-swipe="cardSwiped()" id="start-card">
      Swipe down for a new card
    </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()">Answer</button>
          <button class="button button-clear button-positive" ng-click="goAway()">Decline</button>
        </div>
      </div>
    </swipe-card>
  </swipe-cards>
</ion-pane>

Upvotes: 1

Related Questions