![](/img/trans.png)
[英]how to make image1 show when div1 is clicked, image2 replaces image1 when div2 is clicked?
[英]How to Hide div2 when button1 is clicked and show div1 angular
我想在单击按钮Edit时显示<div ng-if="hideShow">
并在单击按钮Add时隐藏<div ng-if="hideShow1">
并显示<div ng-if="hideShow1">
现在,当我点击ot按钮编辑它显示“hideShow”,然后点击按钮添加它显示“hideShow1”并且不隐藏“hideShow1”。
我正在使用角度。 你怎么能帮助我?
我有这个代码:
<button ng-click="hideShow2=(hideShow2 ? false : true)" value="myValue"
id="mybtn" onclick="change()">
See users
</button>
<button ng-click="hideShow=(hideShow ? false : true)" id="editbtn">Edit</button>
<button ng-click="hideShow1=(hideShow1 ? false : true)" id="addbtn">Add</button>
<div ng-if="hideShow">
<div class="form">
<form ng-submit="saveItem(userForm.$valid)" name="userForm">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">Потребителско име</label>
<input type="text" class="form-control" required ng-model="activeItem.username" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Парола*</label>
<input type="text" class="form-control" id="password" ng-model="activeItem.passwordString" />
</div>
<div class="form-group">
<label for="password">Потвърждаване на парола*</label>
<input type="text" class="form-control" id="password" ng-model="activeItem.passwordConfirm" />
</div>
<p ng-show="(activeItem.passwordString != activeItem.passwordConfirm)" style="color:red">Паролите не съвпадата</p>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Оператор</label>
<input type="text" class="form-control" required id="username" ng-model="activeItem.name" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Запиши</button>
<!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form>
</div>
</div>
<!----------------------------FORM FOR ADD USER---------------------------->
<div ng-if="hideShow1">
<div class="form">
<form ng-submit="createUser(userForm1.$valid)" name="userForm1">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">Потребител</label>
<input type="text" class="form-control" ng-model="usernamee" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Парола</label>
<input type="text" class="form-control" ng-model="passwordd" required id="password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Оператор</label>
<input type="text" class="form-control" ng-model="namee" required id="username" />
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Запиши</button> <!--ng-click="createUser()"-->
<!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form>
</div>
</div>
而不是内联javascript,将代码移动到功能并根据条件设置可见性
<button ng-click="VisibilityChange('1')" value="myValue"
id="mybtn">
See users
</button>
<button ng-click="VisibilityChange('2')" id="editbtn">Edit</button>
<button ng-click="VisibilityChange('3')" id="addbtn">Add</button>`
你的控制器
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.hideShow2 = true;
$scope.hideShow = false;
$scope.hideShow1 = false;
$scope.VisibilityChange= function(type){
switch(type)
{
case"1":
$scope.hideShow2 = true;
$scope.hideShow = false;
$scope.hideShow1 = false;
change();
break;
case"2":
$scope.hideShow2 = false;
$scope.hideShow = true;
$scope.hideShow1 = false;
break;
case"3":
$scope.hideShow2 = false;
$scope.hideShow = false;
$scope.hideShow1 = true;
break;
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.