Question

我有<div>，应该在点击按钮时打开，并在相同的按钮点击时再次关闭。

有人认为它是重复的，我知道主题是相同的，但解决这个问题的方式不同。我需要两种不同的方式。

这是我的小提琴链接https://jsfiddle.net/rojaHema/nhwyowcv/4/

作为一个例子，我需要像whatsApp，点击附件时我们如何获得弹出选项

按钮

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

Div

<div class ="bar bar-footer" ng-if="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>
     </div>
</div>

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-app和ng-controller。然后它奏效了。

＆＃13;

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

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="https://code.ionicframework.com/1.0.0-beta.9/css/ionic.min.css" rel="stylesheet" />
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="https://code.ionicframework.com/1.0.0-beta.9/js/ionic.bundle.min.js"></script>
</head>
<body ng-app="sampleApp" ng-controller="MainCtrl">
   
    <ion-view hide-back-button="true">

        <ion-content scroll="false" style="top:0px;margin-top: 45px;">          
            <div class="row" ng-show="showDetails">
                <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="showDetails = !showDetails">
                    <i class="icon  ion-paperclip"></i>
                    Attach
                </a>

            </div>
        </div>

    </ion-view>
</body>
</html>

＆＃13;

当我们点击附件图标时，会弹出类似whatsApp的选项

2 个答案: