CODEWITHSUNDEEP
htmlangularjsionic-framework
Hema
Hema

Reputation: 986

Hide and show modal on same button click in Ionic1

I want hide and show a div based on same button click

click part 

<a class = "tab-item" ng-click="showDetails = ! showDetails">
   <i class = "icon  ion-paperclip"></i>
     Attach
</a>

Edit

I have removed modal and used only ng-click and tried,But here am getting true/false for each click.But my <div> is not visible.

{{showDetails}}
<div class ="bar bar-footer" ng-show="showDetails" >
<div class = "tabs tabs-icon-bottom tabs-striped tabs-color-gray hide-on-keyboard-open"  style="background-color: white;" >
 <a class = "tab-item" ng-click="myCam()">
   <i class = "icon  ion-camera"></i>
     Camera
 </a>

<a class = "tab-item" ng-click="pdfUpload()">
   <i class = "icon ion-upload"></i>
     Pdf
</a>

Can anyone please help me with this.

Upvotes: 0

Views: 238

Answers (2)

msd117
msd117

Reputation: 386

Link For the Updated fiddle

Updated Fiddle

Controller code

var SampleApp;
(function (SampleApp) {

var app = angular.module('sampleApp', ['ionic']);    
app.controller('MainCtrl', function ($scope) {



    $scope.toggleStretchedMode = function() {

    $scope.showDetails= !$scope.showDetails;



  }

});

})(SampleApp || (SampleApp = {}));

Html Code 

<div>       
    <div ng-app="sampleApp" ng-controller="MainCtrl">
         <ion-content style="display:block">
         <div class="row" ng-if="showDetails"  style="padding-left: 205px;padding-top: 128px;">
        <div class="col col-33" style="text-align:center;">
          <ul class="row" >
            <li class="col" style=" display:inline;padding: 10px 15px;">
            <a class = "tab-item" ng-click="myCam()">
            <i class = "icon  ion-camera"></i>
             Camera
            </a></li>
             <li class="col" style=" display:inline;padding: 10px 15px;" >
            <a class = "tab-item" ng-click="myCam()">
            <i class = "icon  ion-camera"></i>
             Gallery
            </a></li>
            <li class="col" style=" display:inline;padding: 10px 15px;">
            <a class = "tab-item" ng-click="pdfUpload()">
            <i class = "icon ion-upload"></i>
              Pdf
    </a></li>


          </ul>
        </div>
      </div>

        </ion-content>

        <div class ="bar bar-footer">
  <div class = "tabs tabs-icon-bottom tabs-striped tabs-color-gray hide-on-keyboard-open" style="background-color: #11c1f3;">
    <a class = "tab-item" ui-sref="app.homeApp">
       <i class = "icon ion-home"></i>
     Home
    </a>

    <a class = "tab-item" ng-click="myCam()">
       <i class = "icon  ion-camera"></i>
         Camera
    </a>

    <a class = "tab-item" ng-click="toggleStretchedMode()">
       <i class = "icon  ion-paperclip"></i>
         Attach
    </a>

   </div>
</div>

    </div>     
</div>

Hope It helps

Upvotes: 1

ZombieChowder
ZombieChowder

Reputation: 1204

ng-click="show = ! show" will be what you need to attach to your click event or icon. ng-show="show" is what gets show and hidden on the DOM.

  <a class = "tab-item" ng-click="show = ! show">
   <i class = "icon  ion-paperclip"></i>
     Attach
  </a>

<div class ="bar bar-footer" ng-show="show">
 <div class = "tabs tabs-icon-bottom tabs-striped tabs-color-gray hide-on-keyboard-open" style="background-color: white;" >
<a class = "tab-item" ng-click="myCam()">
   <i class = "icon  ion-camera"></i>
     Camera
</a>

<a class = "tab-item" ng-click="pdfUpload()">
   <i class = "icon ion-upload"></i>
     Pdf
</a>

I hope this answer was sufficient for you. Here is a fiddle Fiddle Link

Upvotes: 2

Related Questions