Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to hide/show the html using Angular JS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 248
    Comment on it

    Hello Reader's if you want your webpage to show or hide the html form with just a single click then choosing Angular will be the best way. Lets see how to get it working in the example as below:-

    <!DOCTYPE html>
    <html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body>
    
    <div ng-app="myApp" ng-controller="personCtrl">
    
    <button ng-click="toggle()">Hide user</button>
    
    <p ng-show="myVar">
    First Name: <input type=text ng-model="person.firstName"><br>
    Last Name: <input type=text ng-model="person.lastName"><br><br>
    Full Name: {{person.firstName + " " + person.lastName}}
    </p>
    
    </div>
    
    <script>
    var app = angular.module('myApp', []);
    app.controller('personCtrl', function($scope) {
        $scope.person = {
            firstName: "John",
            lastName: "Doe"
        };
        $scope.myVar = true;
        $scope.toggle = function() {
            $scope.myVar = !$scope.myVar;
        };
    });
    </script> 
    
    </body>
    </html>
    

    In the code above the toggle button will appear which will decide either to show or hide the form on page.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: