我可以使用ng-click和ng-if隐藏并同时显示两个不同的部分

时间:2017-07-25 19:35:06

标签: angularjs angularjs-ng-click angularjs-ng-if

我正在使用angularjs中的应用程序并尝试直接在DOM中执行某些操作。虽然我知道这不是最好的做法,但在这种情况下它会非常实用,因为我特意试图绕过控制器。我尝试将一个按钮挂钩到ng-click,其中包含两个函数true和false,然后使用ng-if来显示和隐藏一个部分。两个功能因为有两个部分。如果单击一个按钮,而另一个按钮显示,而另一个按钮隐藏,反之亦然,我想将其转到哪里。它有点工作,但永远不会隐藏第一部分。此外,在某些尝试中,我得到了一些工作,但它不会默认加载任何一个元素。有任何想法吗?我的代码看起来像:

<button class="add col-xs-6 col-sm-6 col-md-3 col-lg-3 add-btn" ng-model="showThis=true" ng-click="showMe=false; showThis=true">Add</button>
<button class="edit col-xs-6 col-sm-6 col-md-3 col-lg-3 edit-btn" ng-click="showMe=true; showThis=false">Edit</button>

<div ng-if="showThis">
    {A Section of Code}
</div>

<div ng-if="showME">
    {Another Section of Code}
</div>

1 个答案:

答案 0 :(得分:1)

我会设置一个变量,然后用它在两个div之间切换:

<button class="add col-xs-6 col-sm-6 col-md-3 col-lg-3 add-btn" ng-model="showMe=true" ng-click="showMe=false">Add</button>
<button class="edit col-xs-6 col-sm-6 col-md-3 col-lg-3 edit-btn" ng-click="showMe=true">Edit</button>

<div ng-if="showMe">
    {A Section of Code}
</div>

<div ng-if="!showMe">
    {Another Section of Code}
</div>

如果showMe为true,将显示顶部块,并且!或NOT运算符将隐藏第二个块(!true == false)。