AngularJS Data Binding Modal
ng-model directive is used to provide data binding.
Let's take an example where ng-model directive binds the input controller to the rest of your application
See this example:
<html lang="en">
<script src="angular.min.js"></script>
<body>
<h2>This is Sample Form text box in data binging</H2>
<div ng-app="myApp" ng-controller="formCtrl">
<form>
First Name: <input type="text" ng-model="firstname">
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.firstname = "VisionComputers";
});
</script>
</body>
</html>
You can also change the example in the following way:
<html>
<script src="angular.min.js"></script>
<body>
<div ng-app="">
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h2>You entered: {{firstname}}</h2>
</div>
<p>Change the name inside the input field, and you will see the name in the header changes accordingly.</p>
</body>
</html>
AngularJS Checkbox
A checkbox has a value true or false. The ng-model directive is used for a checkbox.
See this example:
<html>
<script src="angular.min.js"></script>
<body>
<div ng-app="">
<form>
Check to show this:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">VisionComputers</h1>
</div>
<p>The ng-show attribute is set to true when the checkbox is checked.</p>
</body>
</html>
Check Box Options:
1)Options selected in checkboxes (single box checked)
<html>
<head>
<script src="angular.min.js"></script>
<script>
angular.module('app', []).controller('appc', ['$scope',
function($scope) {
$scope.selected = 'other';
}
]);
</script>
</head>
<body ng-app="app" ng-controller="appc">
<label>SELECTED: {{selected}}</label>
<div>
<input type="checkbox" ng-checked="selected=='male'" ng-true-value="'male'" ng-model="selected">Male
<br>
<input type="checkbox" ng-checked="selected=='female'" ng-true-value="'female'" ng-model="selected">Female
<br>
<input type="checkbox" ng-checked="selected=='other'" ng-true-value="'other'" ng-model="selected">Other
</div>
</body>
</html>
2)Any Selected Two options:
<html>
<head>
<script src="angular.min.js"></script>
<script>
angular.module('myApp', [])
.controller('myCtrlr', function ($scope) {
var arr = [undefined, undefined];
$scope.reqObject = {
Msoffice : false,
Html : false,
Php : false,
Angular : false
}
$scope.checkChanged = function (v) {
var key = arr.shift();
if (key)
$scope.reqObject[key] = false;
arr.push(v);
$scope.reqObject[v] = true;
}
})
</script>
</head>
<body>
<div ng-app="myApp">
<label> Any Selected Two options: {{}}</label>
<div ng-controller="myCtrlr">
<input type="checkbox" class="two-checkbox" id="curr-Msoffice" ng-model="reqObject.Msoffice" ng-click="checkChanged('Msoffice')">Ms-office</input><br>
<input type="checkbox" class="two-checkbox" id="curr-Html" ng-model="reqObject.Html" ng-click="checkChanged('Html')">Html</input><br>
<input type="checkbox" class="two-checkbox" id="curr-Php" ng-model="reqObject.Php" ng-click="checkChanged('Php')">Php</input><br>
<input type="checkbox" class="two-checkbox" id="curr-Angular" ng-model="reqObject.Angular" ng-click="checkChanged('Angular')">Angular</input>
</div>
</div>
</body>
</html>
3)Chose the courses list in checked box(multiple options):
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<h2>Select the Courses List</h2>
<div ng-app="myApp" ng-controller="myController"
ng-init="list=[
{ name:'Html' },
{ name:'WebDesigning'},
{ name:'C#' },
{ name:'Java' },
{ name:'Accountitng Package' }]"
>
<div ng-repeat="course in list">
<input type="checkbox" ng-model="course.selected"
ng-true-value="'{{course.name}}'" ng-false-value="''"
id="'{{course.name}}'" />
{{ course.name }}
</div>
<p><button ng-click="submit(list)">Submit</button></p>
<p>{{the_list}}</p>
</div>
</body>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', function ($form) {
$form.submit = function (list) {
var course = [];
angular.forEach(list, function (value, key) {
if (list[key].selected == list[key].name) {
course.push(list[key].selected);
}
});
// SHOW THE SELECTED ITEMS IN THE EXPRESSION.
if (course.length > 0)
$form.the_list = course.toString();
else
$form.the_list = 'Please choose an option';
}
} ]
);
</script>
</html>
For
More Explanation
&
Online Classes
More Explanation
&
Online Classes
Contact Us:
+919885348743
+919885348743