AngularJS ng-model (Select)

AngularJS ng-model (Select): This directive syncs the value of HTML controls to the data. The directive “ng-model” enables you to tie an input value to a variable created in your app. AngularJS allows you to combine templates with different directives so that you can combine the HTML with the JavaScript for dynamic and unique displays.

This greatly extends the capabilities of HTML. Directives are divided into two parts Part 1 includes: CSS classes, added attributes, and elements that are added to HTML. The second part includes JavaScript, which extends the behavior of the HTML.

A popular feature of Angular JS is the built-in AngularJs directives that handle most of the DOM manipulation needed to sync the contents of the scope with elements in the client’s view. You can design your own custom directives to add functionality to your web application.

Contents



ng-model (Select) Example

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="exampleCtrl">
Name: <input ng-model="name">
</div>
<script>
var app = angular.module('exampleApp,[]);
app.controller('exampleCtrl', function($scope) {
$scope.name = "eBook Reader";
});
</script>
<p>This is the ng-model directive.</p>
</body>
</html>

ng-model (Select) Example Output

ng-model(Select) Example Output