Show Hide div area in Angular JS

This is my second post on angular js.

In this post I have create 2 radiobutton and will show hide a div area on basis of selection.

Create a “AngularModelController.js” file and write below code:


/// <reference path=”angular.min.js” />
var myApp = angular.module(‘angularApp’, [])
myApp.controller(“angularController”, function ($scope) {
    $scope.message = “This is my Angular JS post”;
});

Below is the complete html code.

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <title></title>
    <script src=”Scripts/angular.min.js”></script>
    <script src=”Scripts/AngularModelController.js”></script>
</head>
<body>

    <form id=”form1″>
       <div ng-app=”angularApp” ng-controller=”angularController”>
            <h1>{{message}}</h1>
            <input id=”rdBtn1″ type=”radio” name=”rdOption” ng-model=”rdBtnShowHide” value=”show” />Show me
            <input id=”rdBtn2″ type=”radio” name=”rdOption” ng-model=”rdBtnShowHide” value=”hide” />Hide me
            <div style=”padding:20px;”></div>
            <div ng-show=”rdBtnShowHide == ‘show'”>Welcome to the world of Angular JS</div>
            <div ng-show=”rdBtnShowHide == ‘hide'”>Data Hide</div>
        </div>
    </form>
</body>
</html>

Output:


Leave a Comment

RSS
YouTube
YouTube
Instagram