Show Hide div area in Angular JS
- Get link
- Google+
- Other Apps
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:
Please visit Angular JS tutorial for .Net developer
- Get link
- Google+
- Other Apps
Popular
What is MicroService? A modern approach to develop software applications
Before describing MicroServices we should first understand distributed technologies we already have in the industry. Prior to MicroServices, we have already Web Services, WCF Service and latest one from Microsoft i.e. ASP.Net Web API. Then Why MicroService Architecture?
You may read about all these distributed technologies in details in my earlier blog.
You may read about all these distributed technologies in details in my earlier blog.
CAML Query Tutorial for SharePoint 2013 and 2010 - A Complete tutorial guide
CAML Query is one of the most important topics in SharePoint. CAML Query is the way for querying items from SharePoint objects like List and Library. This blog is helpful in SharePoint 2010 development as well as in SharePoint 2013 development.
How to consume RESTful APi from server side code - C#
What's new in C# 6.0 language - All new features of C# 6.0 for developers
In the previous blog, we have seen
Introduction to .NET Core - Basic Introduction with Visual Studio 2015 and 2017. Other important blogs I wrote - What is MicroServices?Angular JS for ASP.Net Developer.
In this blog, we will learn new features of C# 6.0. C# 6.0 - An another version of C# released in the year 2015. C# 6 provides numerous new features but I will write about those features which I have explored and which are useful for a developer. You must be curious to know What's new in C# 6.0? Let's start.
Introduction to .NET Core - Basic Introduction with Visual Studio 2015 and 2017. Other important blogs I wrote - What is MicroServices?Angular JS for ASP.Net Developer.
In this blog, we will learn new features of C# 6.0. C# 6.0 - An another version of C# released in the year 2015. C# 6 provides numerous new features but I will write about those features which I have explored and which are useful for a developer. You must be curious to know What's new in C# 6.0? Let's start.
Introduction to .NET Core - Basic Introduction with Visual Studio 2015 and 2017
Till now website/application developed using .net framework can be hosted only on windows platform. So, your application is bounded with windows OS. What if someone wants to deploy .net framework based application on Linux or Mac, earlier there was no solution but now it can be achieved using.NET Core. So let's start by introducing.NET Core.
All about SharePoint 2010 Content Type Hub - SharePoint 2010 Tutorial
Top 20 ASP.Net Web API Interview Questions and Answers
In the previous blog, I wrote about What is ASP.Net Web API? You may also like ASP.Net Web API Tutorial
If you are interested in .Net Core then you may go for .Net Core Tutorial.
In this blog, I have collected interview questions and answers of ASP.Net Web API.
If you are interested in .Net Core then you may go for .Net Core Tutorial.
In this blog, I have collected interview questions and answers of ASP.Net Web API.
SharePoint Interview Questions and Answers
If you have landed to this page it means you are searching for SharePoint Interview Questions and answers, right? You are at right place. In this blog, I have collected important SharePoint interview questions and answers.
Candidate having good knowledge of SharePoint will shine like a star in IT industry. So, it is very important to collect more and more SharePoint interview Questions and Answers to qualify SharePoint interview. Below are few SharePoint questions and answers which are very important and most of them were asked in an interview in IT Companies.
Candidate having good knowledge of SharePoint will shine like a star in IT industry. So, it is very important to collect more and more SharePoint interview Questions and Answers to qualify SharePoint interview. Below are few SharePoint questions and answers which are very important and most of them were asked in an interview in IT Companies.
Getting started with Microsoft Azure
If you are new to Microsoft Azure, then please read my earlier blog on Cloud Computing and Microsoft Azure introduction.
In this blog, I will explain how to create resources in Azure Dashboard and will show you screenshots. This will be a totally new experience for me as well because I am also new to Cloud Computing and wanted to share my experience through my blog.
In this blog, I will explain how to create resources in Azure Dashboard and will show you screenshots. This will be a totally new experience for me as well because I am also new to Cloud Computing and wanted to share my experience through my blog.
ASP.Net Web API Security
If you are new to ASP.Net Web API then please start from the beginning level. What is ASP.Net Web API? In the previous blog, I wrote about Routing in Web API. You may also like .Net Core Introduction and MicroService Architecture.
I have also explained, How to create a secure Web API? in my earlier blog.
In this blog, let's discuss the Web API security in details.
I have also explained, How to create a secure Web API? in my earlier blog.
In this blog, let's discuss the Web API security in details.
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