[英]Change a div on click of button
I am new to front-end
. 我是新来front-end
。 Now, Here I have 3 divs
which will be on the same page.and the position will also be same. 现在,在这里我有3 divs
,它们将在同一页面上。位置也将相同。 it is like toggling . 这就像在切换。 So at the start this will be the div that I will show 因此,一开始,这将是我将展示的div
<div text-angular id="htmlEditorId" >Abc</div>
then there is button whick is like 然后有按钮的鞭子就像
<button class="col-xs-3 btn btn-default" ng-click="changeTab()">NextTab </button>
On click of that button 单击该按钮
<div text-angular id="secon">abcd</div>
this div should be shown and not the previous one. 该div应该显示,而不是前一个。
And on again click of that button a third div 然后再次点击该按钮的第三格
<div text-angular id="third">azzzbcd</div>
this should be seen and again on click first one should show . 这应该被看到,并且再次单击应该显示一个。 Its like a round robin fashion . 它就像一个循环式的时尚。
Now what I tried is using ng-show
and ng-if
. 现在我尝试使用ng-show
和ng-if
。 Can any one help me with this? 谁能帮我这个?
$scope.changeTab = function() {
$scope.showfirst = true;
$scope.showsecond = false;
}
It's quite simple, you can do it in many ways, for example: 这很简单,您可以通过多种方式来做到这一点,例如:
In the controller Define a scoped variable (bindable with the front-end) 在控制器中定义范围变量(可与前端绑定)
$scope.showView = "firstView"
Define also a function: 还定义一个函数:
$scope.changeView = function(value) {
$scope.showView = value;
}
In the html page define your divs and button 在html页面中定义div和按钮
<button ng-click="changeView('secondView')">Chage View</button>
<div ng-show="showView == 'firstView'">abcd</div>
<div ng-show="showView == 'secondView'">abcd</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.