current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

could you please tell me how to open views on button click in ionic.Actually I have three buttons and three views .I want to show one view at one time .like when I click Breakfast it show Breakfast.html page .when I click lunch it show lunch.html same as dinner .I need to show one page at one time on button click

could you please tell me how I will achieve this thing in ionic using button-bar .here is my code

http://codepen.io/anon/pen/pJRJLj 

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

  <title>Tabs Example</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-header-bar align-title="center" class="bar bar-header bar-balanced">
  <div class="buttons">
    <i style="font-size:30px;" class='icon ion-chevron-left'></i>
  </div>
  <h1 class="title">Title!</h1>

</ion-header-bar>
<ion-content>
<div class="button-bar">
  <a class="button" ng-class="{'button-positive': isActive('breakfast')}" ng-click="setActive('breakfast')">Breakfast</a>
            <a class="button" ng-class="{'button-positive': isActive('lunch')}" ng-click="setActive('lunch')">Lunch</a>
            <a class="button" ng-class="{'button-positive': isActive('dinner')}" ng-click="setActive('dinner')">Dinner</a>
</div>

  </ion-content>
<script type="text/ng-template" id="Breakfast.html">
  <ion-view>
    <ion-content padding="true">
       <h2>Breakfast the app</h2>
       <p>Breakfast ipsum dolor sit amet, consectetur adipisicing elit. Facilis Breakfast hic officia quasi excepturi sequi deleniti maiores consectetur veritatis sint?</p>
    </ion-content>
  </ion-view>
</script>

  <script type="text/ng-template" id="Lunch.html">
  <ion-view>
    <ion-content padding="true">
       <h2>Lunch the app</h2>
       <p>Lunch ipsum dolor sit amet, consectetur adipisicing elit. Facilis Breakfast hic officia quasi excepturi sequi deleniti maiores consectetur veritatis sint?</p>
    </ion-content>
  </ion-view>
</script>


  <script type="text/ng-template" id="Dinner.html">
  <ion-view>
    <ion-content padding="true">
       <h2>Dinner the app</h2>
       <p>Dinner ipsum dolor sit amet, consectDinneretur adipisicing elit. Facilis Breakfast hic officia quasi excepturi sequi deleniti maiores consectetur veritatis sint?</p>
    </ion-content>
  </ion-view>
</script>
</body>

</html>
share|improve this question
    
You need to define "State" of your app. See doc : learn.ionicframework.com/formulas/navigation-and-routing-part-1 –  aorfevre May 28 at 17:53
    
@aorfevre yes I know this .But i have already view display ( in which three buttons present) .below that I need to show another view.how it is possible ? –  Shruti May 28 at 17:56
    
Please add references to the Angular library in your codepen. –  Patrick Motard May 28 at 17:57
    
and add your $state configuration –  aorfevre May 28 at 17:57
    
Thank can you use code and give a answer so that better understand –  Shruti May 28 at 17:58

1 Answer 1

up vote 1 down vote accepted

Debugged codepen: http://codepen.io/anon/pen/wagMXm

A couple things were wrong here. You may want to do some reading up on angular-ui-router and how exactly it is used. It's by far the toughest part of learning Ionic so it'll be worth your while to read through the docs.

  • I recommend using your views as individual pages. It makes keeping track of your view history and hierarchy much easier.
  • I would also advise that you keep your ion-content directives in their templates. Again, much easier to keep track of your views if they're completely encapsulated
  • ion-view requires parent directive ion-nav-view, which means that your ion-view must always be nested inside of an ion-nav-view. This is to ensure that $ionicHistory and other services can keep track of where you are in the app, which makes controlling navigation flow much easier.
  • ui-sref is used to transition to a state from an <a> element. ui-sref-active allows you to set a class when the state is active.
  • Your state declarations in your config block were syntactically incorrect. Once again, reading up on ui-router will help with this.
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.