Question

我需要展示一个并隐藏其他人。在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

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

Answer 1

您可以使用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>

Answer 2

点击元素之类的任何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>

Answer 3

您可以使用 ng-if ， ng-show ， ng-hide ， ng-class （与css）和 ng-switch 一起使用。

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

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

总结一下， ng-hide ， ng-show ， ng-if 隐藏/显示基于真实评估的元素一个给定的变量，而 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

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

3 个答案: