如何使用AngularJS为不同的点击事件显示一个div？答案

【问题标题】：How to show a div for different click events using AngularJS?如何使用AngularJS为不同的点击事件显示一个div？
【发布时间】：2019-08-20 12:39:21
【问题描述】：

我的页面上有 2 个导出按钮，如下所示：

<li ng-click="someFunction.getDownload()">
<export-button>CSV</export-button>
</li> //EXPORT 1

<li ng-click="someFunction.getDownload()">
<export-button>CSV</export-button>
</li> //EXPORT 2

我的页面中有2个<div>这样，当我点击导出按钮时会显示：

<div ng-show="someFunction.loading" class="alert alert-info">Getting data...</div> //ng-show 1

<div ng-show="someFunction.loading" class="alert alert-info">Getting data...</div> //ng-show 2

现在，当我单击 EXPORT 1 或 EXPORT 2 时，我的 <div>s 会同时出现。

我想将 ng-show 1 绑定到 EXPORT 1 并将 ng-show 2 绑定到 EXPORT 2 以便在单击相应导出时只有其中一个出现在 UI 中。

我该怎么做？

【问题讨论】：

您是否两次都使用ng-click 调用相同的函数？您还可以显示您的函数someFunction.getDownload() 以及someFunction.loading 值在哪里更改/更新

标签： html angularjs angularjs-directive frontend

【解决方案1】：

我认为这是因为当您单击按钮时在两个 div ng-show="someFunction.loading" 中使用相同的变量 someFunction.loading 值变为 true 并且两个 div 出现

【讨论】：

【解决方案2】：

老实说，您可以通过多种方式做到这一点。

一种可能的解决方案

最简单的方法之一是在“GetDownload()”函数中将变量设置为 true 或 false。

在函数开始时将与单击的导出关联的变量设置为 true。
将该变量提供给您的 ng-show 指令
- https://docs.angularjs.org/api/ng/directive/ngShow
然后在该函数完成时将您的导出标志变量重置为 false。

代码

HTML

<!-- EXPORT 1 BUTTON -->
<button type="button" class="btn btn-default" ng-click="mc.getDownload('exportOne')" ng-disabled="mc.exportLoadingFlags.exporting()">CSV 1</button>

<!-- EXPORT 2 BUTTON-->
<button type="button" class="btn btn-default" ng-click="mc.getDownload('exportTwo')" ng-disabled="mc.exportLoadingFlags.exporting()">CSV 2</button>

<!-- EXPORT 2 PROCESSING -->
<div ng-show="mc.exportLoadingFlags.exportOne" class="alert alert-info">
    <span>EXPORT 1 - Getting data...</span>
    <i class="fa fa-spinner fa-spin"></i>
</div>

<!-- EXPORT 2 PROCESSING -->
<div ng-show="mc.exportLoadingFlags.exportTwo" class="alert alert-info">
    <span>EXPORT 2 - Getting data...</span>
    <i class="fa fa-spinner fa-spin"></i>
</div>

function _getDownload(exportType) {
  switch (exportType) {
    case 'exportOne':
      // set loading flags
      vm.exportLoadingFlags.exportOne = true;
      vm.exportLoadingFlags.exportTwo = false;
      break;
    case 'exportTwo':
      vm.exportLoadingFlags.exportOne = false;
      vm.exportLoadingFlags.exportTwo = true;
      break;
  }

  // do work simulation
  $timeout(() => {
    // when work is done, reset flags
      vm.exportLoadingFlags.exportOne = false;
      vm.exportLoadingFlags.exportTwo = false;
  }, 3000)
}

示例

这是一个 Plunk 示例：https://plnkr.co/1AWqwo

我已将标志变量放置在对象内部进行切换，但您可以根据您的用例将它们分开。

(function() {
  "use strict";

  let app = angular
    .module("myApp", [])
    .controller("MainController", MainController);

  MainController.$inject = ["$scope", "$timeout"];

  function MainController($scope, $timeout) {
    /**
     * John Papa Style Guide
     * https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md
     * */
    let vm = this;

    // scoped variables
    vm.title = " AngularJS: Selectively Toggle Specific DIVs";
    vm.exportLoadingFlags = {
      exportOne: false,
      exportTwo: false,
      exporting: function() {
        return this.exportOne || this.exportTwo;
      }
    }

    // functions hoist
    vm.getDownload = _getDownload;

    // functions
    function _getDownload(exportType) {

      // set loading flags
      switch (exportType) {
        case 'exportOne':
          vm.exportLoadingFlags.exportOne = true;
          vm.exportLoadingFlags.exportTwo = false;
          break;
        case 'exportTwo':
          vm.exportLoadingFlags.exportOne = false;
          vm.exportLoadingFlags.exportTwo = true;
          break;
      }

      // do work simulation
      $timeout(() => {
        // when work is done, reset flags
        vm.exportLoadingFlags.exportOne = false;
        vm.exportLoadingFlags.exportTwo = false;
      }, 3000)
    }

    // init function
    function init() {
      // initialize stuff
    }

    // INITIALIZE
    init();
  }

})();

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunk</title>

  <link rel="stylesheet" href="style.css" />

  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

  <!-- JQuery and Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <!-- Angular Stuff -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.js"></script>

  <!-- Our Angularjs App -->
  <script type="text/javascript" src="app.js"></script>
</head>

<!-- ==== MAIN APP HTML ==== -->

<body ng-app="myApp" ng-controller="MainController as mc">
  <div class="container" style="padding:1em;">
    <div class="row">
      <div class="col-xs-12">
        <div class="jumbotron text-center">
          <h3>{{ mc.title }}</h3>
        </div>
      </div>

      <!-- ==== Solution 1 ==== -->
      <div class="col-xs-12">
        <label>Solution 1</label>
        <div>
          <ul>
            <li>
              Set flag variables to true or false to toggle your DIVs.
            </li>
          </ul>
        </div>
      </div>

      <div>
        <hr style="width:100%">
      </div>

      <div class="col-xs-12" style="padding-top:1.5em;background:rgba(131, 149, 167,0.2)">
        <div>
          <ul>
            <!-- Export 1 Directive -->
            <li>
              <button type="button" class="btn btn-default" ng-click="mc.getDownload('exportOne')" ng-disabled="mc.exportLoadingFlags.exporting()">CSV 1</button>
            </li>
            <!-- Export 2 Directive -->
            <li>
              <button type="button" class="btn btn-default" ng-click="mc.getDownload('exportTwo')" ng-disabled="mc.exportLoadingFlags.exporting()">CSV 2</button>
            </li>
          </ul>
        </div>
        <div>
          <!-- Export 1 Processing -->
          <div ng-show="mc.exportLoadingFlags.exportOne" class="alert alert-info">
            <span>EXPORT 1 - Getting data...</span>
            <i class="fa fa-spinner fa-spin"></i>
          </div>
          <!-- Export 2 Processing -->
          <div ng-show="mc.exportLoadingFlags.exportTwo" class="alert alert-info">
            <span>EXPORT 2 - Getting data...</span>
            <i class="fa fa-spinner fa-spin"></i>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

【讨论】：