时间戳

首页 > 解决方案 > 如何使用角度按钮显示和隐藏html表单

javascript - 如何使用角度按钮显示和隐藏html表单

问题描述

我还在学习编程。如何使用 Angular 中的按钮显示和隐藏两个不太不同的 HTML 表单？我有一个代码，但它只显示两种形式，并没有隐藏它们。我想在一行上显示这两个表格。我怎么能做到这一点？请帮我。我的 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>

角代码。也许我认为这不是很正确，但你会帮助我。再次感谢！

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.hideMe = function(){
    console.log('hide the button');
    $scope.hide();
  }

});

标签： javascriptphpangularjs

解决方案

这是一个可以帮助您入门的演示。浏览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>

推荐阅读