AngularJS ng-model指令
AngularJS ng-model指令，ngModel是一个绑定输入、选择和文本区域的指令，并将所需的用户值存储在一个变量中，我们可以在需要该值时使用该变量。
ngModel还用于表单的验证。
我们可以将ngModel用于：
- input
- text
- checkbox
- radio
- number
- url
- date
- datetime-local
- time
- month
- week
- select
- textarea
例子：
<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<style>
.column {
float: left;
text-align: left;
width: 49%;
}
.row {
content: "";
display: table;
}
</style>
<body ng-app="myApp"
ng-controller="myController">
<h4>Input Box-</h4>
<div class="row">
<div class="column">
Name-
<input type="text"
ng-model="name">
<pre> {{ name }} </pre> Checkbox-
<input type="checkbox"
ng-model="check">
<pre> {{ check }} </pre> Radiobox-
<input type="radio"
ng-model="choice">
<pre> {{ choice }} </pre> Number-
<input type="number"
ng-model="num">
<pre> {{ num }} </pre> Email-
<input type="email"
ng-model="mail">
<pre> {{ mail }} </pre> Url-
<input type="url"
ng-model="url">
<pre> {{ url }} </pre>
</div>
<div class="column">
Date:
<input type="date" ng-model="date1" (change)="log(date1)">
<pre> Todays date:{{ date1+1 }}</pre> Datetime-local-
<input type="datetime-local" ng-model="date2">
<pre> {{ date2+1 }} </pre> Time-
<input type="time" ng-model="time1">
<pre> {{ time1+1 }} </pre> Month-
<input type="month" ng-model="mon">
<pre> {{ mon+1 }} </pre> Week-
<input type="week" ng-model="we">
<pre> {{ we+1 }} </pre>
</div>
</div>
</body>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.name = "Hello Geeks!";
$scope.check = "";
$scope.rad = "";
$scope.num = "";
$scope.mail = "";
$scope.url = "";
$scope.date1 = "";
$scope.date2 = "";
$scope.time1 = "";
$scope.mon = "";
$scope.we = "";
$scope.choice = "";
$scope.c = function() {
$scope.choice = true;
};
});
</script>
</html>
为了打印 url 和 email，我们必须写一个有效的 email/url，只有这样它才会被打印。如果使用 ngmodel 打印日期、时间，我们必须填写输入框中的所有字段。单选按钮一旦被选中，就不会被取消选中，因为在“C”的函数中，我们将choice的值设置为true。
使用表单的 Ngmodel：我们也可以用这种方式定义 ngModel，在app.component.html中编写以下代码
<div class="form-group">
<label for="phone">mobile</label>
<form>
<input
type="text"
id="phone"
ngModel name="phone"
#phone="ngModel"
placeholder="Mobile">
</form>
<pre>{{ phone.value }}</pre>
</div>ngModel通过引用而不是值来存储变量。通常是将输入绑定到作为对象（例如日期）或集合（例如数组）的模型。
创建的phone 对象有许多用于验证目的的字段。出于验证目的，我们可以添加以下类。我们只列出重要的。
- ng-touched
- ng-untouched
- ng-valid
- ng-invalid
- ng-dirty
- ng-pending
- ng-pristine
使用 getter 和 setter 绑定 ngModel：
每当使用零参数调用函数时，它都会返回模型的表示。当使用参数调用时，它会设置值。由于ngModel引用了地址，这就是为什么它不将更改的值保存在对象本身中，而是将其保存在某个内部状态（variable-name.value）中。如果我们保持对使用 getter 和 setter 的绑定Models，当存在内部表示时，这将很有用，因为与代码的其余部分相比，getter和setter函数更经常被调用。
语法：
ng-model-options="{ getterSetter: true }"将此添加到“input”上。
例子：
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<form>
Name:<input type="text" name="Name"
ng-model="user.name"
ng-model-options="{ getterSetter: true }" />
<pre>user.name = <span ng-bind="user.name()"></span></pre>
Name1:<input type="text" name="Name1"
ng-model="user.name1"
ng-model-options="{ getterSetter: true }" />
<pre>user.name = <span ng-bind="user.name1()"></span></pre>
</form>
</div>
<script>
angular.module('myApp', [])
.controller('myController', ['$scope', function($scope) {
name = 'GeeksforGeeks';
name1 = "";
$scope.user = {
name: function(Name) {
return arguments.length ? (name = Name) : name;
},
name1: function(Name1) {
return arguments.length ? (name1 = Name1) : name1;
}
};
}]);
</script>
</body>
</html>在这里，我们用字符串Geeksforgeeks初始化 name ，用空字符串初始化name1 。
常见问题FAQ
- 程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
- 请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
