How to button show and hide html form with angular

Question

I'm still learning to programme. How I can show and hide two not very different HTML forms with a button in Angular? 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:

<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();
  }

});

Answer 1

You have to set variable to false(ng-show), and then when user click the button, set variable to true:

Leave ng-click attribute like this:

<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;
    }
  }

});

Answer 2

Here is a demo that may help you get started. Go over the docs for ng-show and 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>

How to button show and hide html form with angular

Question

2 answers

solution1
0 2019-03-13 20:45:00

solution2
0 2019-03-13 20:54:49

How to button show and hide html form with angular

Question

2 answers

solution1 0 2019-03-13 20:45:00

solution2 0 2019-03-13 20:54:49

solution1
0 2019-03-13 20:45:00

solution2
0 2019-03-13 20:54:49