javascript - 如何使用 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 的 div。

您还将重构您的 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;
});