如何按钮显示和隐藏带有角的html表单
[英]How to button show and hide html form with angular
问题描述
I'm still learning to programme. 
我还在学习编程。 How I can show and hide two not very different HTML forms with a button in Angular? 如何在Angular中使用按钮显示和隐藏两个不太不同的HTML表单？ I have a code but it shows only two forms and doesn't hide them. 我有一个代码，但是它只显示两种形式，并且不会隐藏它们。 I want to display these two forms on one row. 我想将这两种形式显示在一行上。 How I can do this? 我怎么能这样做？ Please help me. 请帮我。 My HTML code: 我的HTML代码：
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<button class="btn btn-primary" ng-click="showDiv=true; hideMe()" >Show Div</button>
<button class="btn btn-primary" ng-click="showDiv1=true; hideMe()" >Show Div1</button>
<div ng-show="showDiv">
<div class="col-xl-3">
<div class="form">
<form>
<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" required id="password" ng-model="activeItem.password" />
</div>
</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>
</form>
</div>
</div>
</div>
<div ng-show="showDiv1">
<div class="col-xl-3">
<div class="form">
<form>
<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" required id="password" ng-model="activeItem.password" />
</div>
</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>
</form>
</div>
</div>
</div>
</body>
</html>
Angular code. 角度代码。 Maybe it is not very right i think, but you will help me. 我想可能不是很对，但是您会帮助我。 Thanks again! 再次感谢！
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.hideMe = function(){
console.log('hide the button');
$scope.hide();
}
});
2 个解决方案
解决方案1
0 2019-03-13 20:45:00
You have to set variable to false(ng-show), and then when user click the button, set variable to true: 您必须将变量设置为false（ng-show），然后在用户单击按钮时将变量设置为true：
Leave ng-click attribute like this: 保留ng-click属性，如下所示：
<button class="btn btn-primary" ng-click="hideDiv()" >Show Div</button>
<button class="btn btn-primary" ng-click="hideDiv1()" >Show Div1</button>
Then: 然后：
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.showDiv = false;
$scope.showDiv1 = false;
$scope.hideDiv = function(){
if ($scope.showDiv) {
$scope.showDiv = false;
} else {
$scope.showDiv = true;
}
}
$scope.hideDiv1 = function(){
if ($scope.showDiv1) {
$scope.showDiv1 = false;
} else {
$scope.showDiv1 = true;
}
}
});
解决方案2
0 2019-03-13 20:54:49
Here is a demo that may help you get started. 这是一个可以帮助您入门的演示。 Go over the docs for ng-show and ng-click 查看ng-show和ng-click的文档
var app = angular.module("app", []); app.controller("HelloController", function($scope) { $scope.message = "Hello, AngularJS"; $scope.showHello = true; $scope.showBye = false; $scope.toggleBye = () => { $scope.showBye = !$scope.showBye; }; });
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <body ng-app="app"> <div ng-controller="HelloController"> <h2 ng-show="showHello">Hello</h2> <h2 ng-show="showBye">Bye</h2> <h2>Show always</h2> <button ng-click="toggleBye()">toggle bye</button> </div> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.