在按钮单击 AngularJS 上的元素之间切换答案

【问题标题】：Toggle between elements on button click AngularJS在按钮单击 AngularJS 上的元素之间切换
【发布时间】：2020-11-05 10:33:50
【问题描述】：

我有两个 div，想通过单击按钮在它们之间切换。以下是我尝试过的代码：

<div id="one" *ngIf="show == true">
     Hello One
</div>
<div id="two" *ngIf="show == false">
     Hello Two
</div>
<button ng-init="show=true">Click to toggle</button>

我想在按钮单击时在两个 div 之间切换，但在这种情况下不会发生这种情况。我怀疑该节目永远不会设置为假。什么可能是我的错误。我是 AngularJS 的新手。如何在按钮单击时实现两个元素之间的切换？提前致谢。

【问题讨论】：

代替ng-init="show=true"，尝试ng-click="toggle()" 并使用切换功能扩展控制器，如下面的答案所示。

标签： javascript angularjs

【解决方案1】：

首先，你必须写ng-if，而不是*ngIf。前一种表示法适用于 Angular，后一种表示法适用于 AngularJS（您正在使用的 Angular 的前身）。

其次，你是对的，show 在你的代码中永远不会设置为 false。需要在控制器中编写一个函数，可以切换show的值，如下：

constructor($scope) {

    $scope.show = true;
    $scope.toggle = function(){
        $scope.show =!$scope.show;
    }
}

那么，html可以如下：

<div id="one" ng-if="show">
     Hello One
</div>
<div id="two" ng-if="!show">
     Hello Two
</div>
<button ng-click="toggle()">Click to toggle</button>

【讨论】：

是的，我弄错了！非常感谢

【解决方案2】：

使用 ng-show 和 ng-hide 实现了它。使用以下：

<div id="one" ng-show="show>
    Hello One
</div>
<div id="two" ng-hide="show">
    Hello Two
</div>
<button ng-click="toggle()">Click to toggle</button>

在Controller中，添加了这个：

$scope.show = true;
$scope.toggle = function(){
    $scope.show =!$scope.show;
}

参考：How to toggle between elements in angularJS

我已经实现了我的目标，但肯定想知道我们如何通过 ng-If 实现它

【讨论】：

如果您采用此解决方案并将 div 替换为包含 ng-if 的 div，如您的问题所示，会发生什么情况？
还有一个问题：你写的是 *ngIf 而不是 ng-if。我添加了一个带有工作示例的答案。如果您对该答案感到满意，请用复选标记进行标记。