Show Hide div area in Angular JS

on
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:

Please visit Angular JS tutorial for .Net developer

Comments

Post a Comment

Dear Readers, Please post your valuable feedback in the comment section if you like this blog or if you have any suggestions. I would love to hear the same from you. Thanks