AngularJS Basic ng model Instruction Detailed Explanation and Sample Code

2021-07-07 06:20:59
OfStack

AngularJS ng-model Directive

AngularJS instance

Bind the value of the input box to the scope variable:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<input ng-model="name">

<p>input  The value of the input box is bound with a variable  "name" :</p>
{{name}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "John Doe";
});
</script>

<p> This example demonstrates how to use the  ng-model  Directive binds the value of the input box to the  scope  Variable. </p>

</body>
</html>

Definition and usage

The ng-model directives bind HTML form elements into scope variables.

If a variable does not exist in scope, it will be created.

Grammar

< element ng-model="name" > < /element >

< input > , < select > , < textarea > Element supports the directive.

Parameter value

值	描述
separator	你想要绑定到表单域的属性名。

The above is the collation of AngularJS ng-model data, and the relevant data will be supplemented in the future.