Javascript AngularJS：点击按钮显示其他div并隐藏当前div_Javascript_Html_Angularjs

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

javascript html angularjs

Javascript AngularJS：点击按钮显示其他div并隐藏当前div,javascript,html,angularjs,Javascript,Html,Angularjs,我有一个，其中包含一个。单击此按钮时，我希望隐藏此，并显示另一个新的，以代替当前的。另外，新的包含一个，单击该按钮将打开旧的。这将使我能够在单击这些中的时一次打开一个。有人能告诉我如何用AngularJS做这个吗请尝试以下类似操作：使用ng单击和ng显示 <div ng-show="!showDiv"> <button ng-click="showDiv=true"></button> </div>

我有一个

，其中包含一个

。单击此按钮时，我希望隐藏此

，并显示另一个新的

，以代替当前的

。另外，新的

包含一个

，单击该按钮将打开旧的

。这将使我能够在单击这些

中的

时一次打开一个

。有人能告诉我如何用AngularJS做这个吗

请尝试以下类似操作：使用ng单击和ng显示

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

请尝试以下类似操作：使用ng单击并显示ng

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

使用

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

中的切换，并将其放入控制器中。

使用

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>

<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>


切换
切换

但请记住，要从视图中分离逻辑，如

ngClick

中的切换，并将其放入控制器中。


<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>

第一组
节目组2
第2组
节目组1

代码笔：


第一组
节目组2
第2组
节目组1

CodePen:

Div 1隐藏，但单击“Show Div 2”按钮时，Div 2不会出现。你能给我看一个有效的例子吗？@k-Infected我做了一个编辑，试试看。在我处理代码时，penDiv 1隐藏，但单击“Show Div 2”按钮时，Div 2不会出现。你能给我看一个有效的例子吗？@k-Infected我做了一个编辑，试试看。我在写密码笔的时候你试了什么？plnkrr或FIDDLE替换当前的

是什么意思？要替换还是要隐藏显示？图像链接不可用present@R.J是的，我想隐藏表演。图像链接是403禁止访问：d您尝试了什么？plnkrr或FIDDLE替换当前的是什么意思？要替换还是要隐藏显示？图像链接不可用present@R.J是的，我想隐藏表演。图像链接为403禁止访问：D