I want when clicking on button Edit to show <div ng-if="hideShow">
and when click on button Add to hide <div ng-if="hideShow1">
and display <div ng-if="hideShow1">
Now when i click ot button Edit it displays "hideShow" and after this when click on button Add it display "hideShow1" and doesn't hide "hideShow1".
I'm using angular. How you can help me?
I have this code:
<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>
Instead of inline javascript, move your code to function and set visibility according to condition
<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>`
Your controller
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;
}
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.