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
    • 225
    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>
    <script src=""></script>
    <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}}
    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;

    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

Sign up using

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: