在 Ionic 1 中单击同一按钮时隐藏和显示模式

Question

我想隐藏和显示基于相同按钮单击的 div

点击部分

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

编辑

我已删除模态并仅使用ng-click 并尝试过，但这里每次点击都会得到真/假。但我的<div> 不可见。

{{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>

谁能帮帮我。

Answer 1

更新小提琴的链接

Updated Fiddle

控制器代码

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代码

<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>

希望对你有帮助

Answer 2

ng-click="show = ! show" 将是您需要附加到点击事件或图标的内容。 ng-show="show" 是在 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>

我希望这个答案对你来说已经足够了。这是一个小提琴Fiddle Link