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