我有以下代码。
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 .
最佳答案
走 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;
});
关于javascript - 如何使用 angularjs 替换现有父 div 上的子 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44627500/