通过 Angular 模板引擎显示/隐藏(切换）多个块

Show/Hide(toggle) several blocks via Angular template engine

本文关键字：切换 隐藏 Angular 引擎 显示 通过      更新时间：2023-09-26

我需要显示一个并隐藏其他。在jquery中，我使用了"this"：

$('div').click(functiuon(){ this.show() });

也许在 Angular 中，您可以使用类似的东西吗？

<div class="toggle">
  <span ng-click="this=!this ? true : false"></span><br/>
  <span ng-if="this" >
    111111111
  </span>
</div>
<div class="toggle">
  <span ng-click="this=!this ? true : false"></span><br/>
  <span ng-if="this" >
    2222222222222
  </span>
</div>
etc this, this , this

我只需要对所有块使用一个变量。

任何 dom 元素交互（如单击元素）都应该在指令中完成，您可以按照以下内容来实现您想要的： 

var app = angular.module('demoapp', []);
app.directive('toggleIt', function() {
  return {
    restrict: 'A',
    link: function(scope, el, attrs) {
      console.log(el.find('span'));
      el.find('span').eq(0).on('click', function() {
        el.find('span').eq(1).toggleClass('hide show');
      });
    }
  };
});
.show{display:block;}
.hide{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='demoapp'>
  <div data-toggle-it class="toggle">
    <span>toggle1</span>
    <br/>
    <span class='spn show'>
    111111111
  </span>
  </div>
  <div data-toggle-it class="toggle">
    <span>toggle2</span>
    <br/>
    <span class='spn hide'>
    2222222222222
  </span>
  </div>
  <div data-toggle-it class="toggle">
    <span>toggle3</span>
    <br/>
    <span class='spn hide'>
    3333333333333
  </span>
  </div>
</div>

您可以使用 ng-hide 在 true 上隐藏元素，也可以使用 ng-show 在 true 上显示元素：

<div class="toggle">
  <span ng-click="pop1=!pop1 ? true : false"></span><br/>
  <span ng-show="pop1" >
    111111111
  </span>
</div>
<div class="toggle">
  <span ng-click="pop2=!pop2 ? true : false"></span><br/>
  <span ng-show="pop2" >
    2222222222222
  </span>
</div>

您可以使用 ng-if、ng-show、ng-hide、ng-class（与 css 结合使用）和 ng-switch。

ng-show，ng-hide和ng-if背后有相同的逻辑（如果给定变量为真/假，则显示/隐藏以下内容）。它们之间存在一些性能差异，但此主题超出了范围。

使用 ng-class 显示/隐藏元素只是它的一个特殊用例，但它仍然可以实现。

总而言之，ng-hide，ng-show，ng-if hide/show元素基于给定变量的真实评估，而ng-class切换一个类，例如 

$('#someElement').toggleClass('randomClassName');

例：

.HTML

<div ng-app="exampleApp" ng-init="switchr1 = true; switchr2 = true; switchr3 = true; switchr4 = show; ">
  <h2>ng-if</h2>
  <div class="toggle">
    <span ng-click="switchr1 = switchr1 ? false : true">click me</span><br/>
    <span ng-if="switchr1" >
      shown by ng-if
    </span>
  </div>
  <h2>ng-show</h2>
  <div class="toggle">
    <span ng-click="switchr2 = switchr2 ? false : true">click me</span><br/>
    <span ng-show="switchr2" >
      shown by ng-show
    </span>
  </div>

  <h2>ng-hide</h2>
  which is the same thing as ng-show, but with reversed logic<br>
  <div class="toggle">
    <span ng-click="switchr3 = switchr3 ? false : true">click me</span><br/>
    <span ng-hide="!switchr3" >
      shown by ng-hide
    </span>
  </div>
  <h2>ng-class</h2>
  <div class="toggle">
    <span ng-click="switchr4 = (switchr4=='show') ? 'hide' : 'show'">click me</span><br/>
    <span ng-class="switchr4" >
      hidden by ng-class
    </span>
  </div>
</div>

请注意，您在 ng-init 指令中启动了 switchr1、switchr2 等。你也可以使用 $scope 在 js 代码中做到这一点，但为了简单起见，我这样做了。

.JS

var app = angular.module('exampleApp', []);

.CSS

.hide {
  display: none;
}
.show {
  display: initial;
}

我还为您编写了一些工作代码/完整示例：http://codepen.io/VanTudor/pen/EKYZwM

相关文章：