ng-model
directive.ng-model
directive binds the input controller to the rest of your application.<!DOCTYPE html>
<html>
<head>
<title>AngularJS Data Binding Forms</title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form>
<strong> First Name :</strong> <input type="text" ng-model="firstname">
</form>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.firstname = "Ramana";
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Data Binding Forms</title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h3>You entered : {{firstname}}</h3>
</div>
</body>
</html>
ng-model
directive is used to bind select boxes to your application.<!DOCTYPE html>
<html>
<head>
<title>AngularJS Data Binding Forms</title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<form>
<b>Select one topic :</b>
<select ng-model="myVar">
<option value="">Select One</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="Bootstrap">Bootstrap</option>
</select>
</form>
<div ng-switch="myVar">
<div ng-switch-when="HTML">
<h2>HTML</h2>
<p>Hyper Text Markup Language (HTML) was invented by "Tim Berner Lee".
He was a British Computer Scientist. The first web page was created at CERN by
Tim Berners-Lee on August 6, 1991. </p>
</div>
<div ng-switch-when="CSS">
<h2>CSS</h2>
<p>CSS is the acronym for "Cascading Style Sheet". Tutorial provides
basic and advanced concepts of CSS technology. Our CSS tutorial is developed
for beginners and professionals.</p>
</div>
<div ng-switch-when="Bootstrap">
<h2>Bootstrap</h2>
<p>Bootstrap is the most popular HTML, CSS and JavaScript framework
for developing responsive, mobile-first web sites. Bootstrap is faster and
easier web development.</p>
</div>
</div>
</div>
</body>
</html>
The AngularJS checkbox has the value true or false. Apply the ng-model
directive to a checkbox, and use its value in your application.
AngularJS ng-model
directive is used to data bind radio buttons in your applications. In this example, we are also using ng-switch
directive to hide and show HTML sections depending on the value of the radio buttons.
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Checkbox and Radiobuttons</title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<h3>Checkbox Example :</h3>
<form>
<strong>Check Here :</strong>
<input type="checkbox" ng-model="my_check">
</form>
<h2 ng-show="my_check"><a href="http://www.freetimelearning.com" target="_blank">www.freetimelearning.com</a></h2>
<hr />
<h3>Radiobuttons Example :</h3>
<form>
<strong>Pick a topic :</strong>
<input type="radio" ng-model="my_radio" value="HTML">HTML
<input type="radio" ng-model="my_radio" value="CSS">CSS
<input type="radio" ng-model="my_radio" value="Bootstrap">Bootstrap
</form>
<div ng-switch="my_radio">
<div ng-switch-when="HTML">
<h2>HTML</h2>
<p>Hyper Text Markup Language (HTML) was invented by "Tim Berner Lee".
He was a British Computer Scientist. The first web page was created at CERN
by Tim Berners-Lee on August 6, 1991.</p>
</div>
<div ng-switch-when="CSS">
<h2>CSS</h2>
<p>CSS is the acronym for "Cascading Style Sheet". Tutorial provides basic
and advanced concepts of CSS technology. Our CSS tutorial is developed for
beginners and professionals.</p>
</div>
<div ng-switch-when="Bootstrap">
<h2>Bootstrap</h2>
<p>Bootstrap is the most popular HTML, CSS and JavaScript framework for
developing responsive, mobile-first web sites. Bootstrap is faster and easier
web development.</p>
</div>
</div>
</div>
</body>
</html>