Question

我有<div>，其中包含<button>。单击此按钮后，我希望隐藏此<div>，并显示另一个新<div>来代替当前<div>。此外，新<div>包含<button>，点击后会打开旧版<div>。这样，我就可以点击<div>中存在的<button>一次打开一个<div>。谁能告诉我如何在AngularJS中做到这一点？

This picture shows my requirement

Answer 1

请尝试类似下面的内容：使用ng-click和ng-show

<div ng-show="!showDiv">
        <button ng-click="showDiv=true"></button>
        </div>
        <div ng-show="showDiv">
    <button ng-click="showDiv=false"></button>
        </div>

Answer 2

使用ngShow：

<div ng-show="condition" ng-init="condition = true">
    <button ng-click="condition = false">Toggle</button>
</div>
 <div ng-show="!condition">
    <button ng-click="condition = true">Toggle</button>
</div>

但请记住，要从视图中分隔ngClick中的切换等逻辑，并将其放入控制器中。

Answer 3

<body ng-init="showDiv = true">  

  <div ng-show="showDiv">
       <h1>Div 1</h1>
       <button ng-click="showDiv = false">Show Div 2</button>
    </div>
    <div ng-hide="showDiv">
        <h1>Div 2</h1>
       <button ng-click="showDiv = true">Show Div 1</button>
    </div>

</body>

CodePen：https://codepen.io/RaymondAtivie/pen/OXYRyE

AngularJS：显示其他div并单击按钮隐藏当前div

3 个答案: