ngModel是绑定输入,选择和文本区域,并将所需的用户值存储在变量中的指令,我们可以在需要该值时使用该变量。
在验证过程中也以某种形式使用它。
我们可以将ngModel用于:
输入文本
复选框
无线电
数
电子邮件
网址
日期
datetime-local
时间
月
周
选择
文本区域
例:
.column {
float:left;
text-align:left;
width:49%;
}
.row {
content:"";
display:table;
}
ng-controller="myController">
Input Box-
Name-
ng-model="name">
{{ name }}
Checkbox-
ng-model="check">
{{ check }}
Radiobox-
ng-model="choice">
{{ choice }}
Number-
ng-model="num">
{{ num }}
Email-
ng-model="mail">
{{ mail }}
Url-
ng-model="url">
{{ url }}
Date:
Todays date:{{ date1+1 }}
Datetime-local-
{{ date2+1 }}
Time-
{{ time1+1 }}
Month-
{{ mon+1 }}
Week-
{{ we+1 }}
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;
};
});
为了使url和电子邮件能够打印,我们只需要编写一个有效的email /url才可以打印出来。在使用ngmodel打印日期,时间的情况下,我们必须在输入框中填写所有字段。一旦选中单选按钮,就不会取消选中该按钮,因为在“c”功能中,我们将选择值设置为true。
Ngmodel使用形式:
我们也可以这样定义ngModel,
在app.component.html中编写以下代码
mobile
type="text"
id="phone"
ngModel name="phone"
#phone="ngModel"
placeholder="Mobile">
{{ phone.value }}
ngModel通过引用而不是值存储变量。通常将输入绑定到对象(例如日期)或集合(例如数组)的模型。
创建的电话对象具有许多用于验证目的的字段。我们可以添加以下类以进行验证。我们只列出重要的。
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine
将ngModel与getter和setter绑定:
每当使用零参数调用函数时,它都会返回模型的表示形式。当使用参数调用时,它会设置值。由于ngModel引用地址,因此它不将更改的值保存在对象本身中,而是将其保存在某些内部状态(variable-name.value)中。如果我们在内部表示形式时保持对模型使用getter和setter的做法,这将很有用,因为与代码的其余部分相比,getter和setter函数的调用频率更高。
用法:
ng-model-options="{ getterSetter:true }"
将此添加到输入选项卡。
例:
Name:
ng-model="user.name"
ng-model-options="{ getterSetter:true }" />
user.name =
Name1:
ng-model="user.name1"
ng-model-options="{ getterSetter:true }" />
user.name =
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;
}
};
}]);
在这里,我们通过字符串Geeksforgeeks初始化了name,并通过一个空字符串初始化了name1。