如何使用 angularjs 替换现有父 div 上的子 div？

Question

我有以下代码。

html:

<div ng-controller="Test">
         <div ng-click="first()" ng-hide="seconddiv">First
           <div ng-click="second()" ng-show="seconddiv">Second</div> 
         </div>
    </div>

js:

var app = angular.module('app',[]);

app.controller('Test',function($scope){
    $scope.first = function(){
    alert("first clicked");
  }
  $scope.second = function(){
    alert("second clicked");
  }
});

在执行上面的代码时：

a).默认情况下我应该只能看到 First（我现在可以看到一个：First）- 现在可以了

b).然后，如果我单击 First，那么它应该执行它的 first() 方法，然后 First 应该替换为 Second(on UI) - 它不会出现

c).然后，如果我点击 Second，那么它应该只执行它的 second() 方法，（它不应该执行 first() 之类的任何其他方法，除了 second() 方法） - 它不是即将到来

请您帮我解决这个问题，我们该怎么做？提前致谢！

请注意 Html <div> 结构不应更改，因此应该相同。

已创建 Fiddle .

Answer 1

走 Angular 路。您将只有一个功能，toggle。这会将变量 first 的值从 true 切换为 false，反之亦然。根据 first 的值，您将显示内容为 First 的 div 或内容为 Second.

的内容

您还将重构您的 HTML，如下所示

<div ng-controller="Test">
    <div ng-if="first" ng-click="toggle()">First</div>
    <div ng-if="!first"ng-click="toggle()">Second</div> 
</div>

在你的 JS 中你会做

var app = angular.module('app',[]);

app.controller('Test',function($scope){
    $scope.first = true;
    $scope.toggle = function(){
      $scope.first = !$scope.first;
    }
});

==== 编辑：

或者，您甚至不需要 toggle 函数。只需使用 ng-click 表达式。

<div ng-controller="Test">
    <div ng-if="first" ng-click="first=!first">First</div>
    <div ng-if="!first"ng-click="first=!first">Second</div> 
</div>

在 JS 中

app.controller('Test',function($scope){
    $scope.first = true;
});

如何使用 angularjs 替换现有父 div 上的子 div？

How to replace a child div on it's existing parent div using angularjs?

javascript

angularjs

angularjs-filter