AngularJS ng-model指令用法详解 _AngularJS指令

ngModel
是绑定输入, 选择和文本区域的指令, 并将所需的用户值存储在变量中, 我们可以在需要该值时使用该变量。
在验证过程中也以某种形式使用它。
我们可以用ngModel与：

输入
- 文本
- 复选框
- 无线电
- Number
- 电子邮件
- 网址
- 日期
- 本地日期时间
- 时间
- 月
- 周
查找
文本区域

例子：

< !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 / url才可以打印出来。在使用ngmodel打印日期, 时间的情况下, 我们必须在输入框中填写所有字段。选中后, 单选按钮不会被取消选择, 因为它具有"C"我们将选择的值设置为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通过引用存储变量, 而不是值。通常将输入绑定到对象(例如日期)或集合(例如数组)的模型。
创建的电话对象具有许多字段, 用于验证目的。我们可以添加以下类以进行验证。我们只列出重要的。

触摸
ng不变
ng有效
ng无效
ng-dirty
待处理
ng-原始

将ngModel与getter和setter绑定：
每当使用零参数调用函数时, 它都会返回模型的表示形式。当使用参数调用时, 它会设置值。由于ngModel指向地址, 因此它不将更改后的值保存在对象本身中, 而是将其保存在某些内部状态(变量名。值)的原因。如果在存在内部表示时我们保持对模型使用getter和setter的做法, 这将很有用, 因为与代码的其余部分相比, getter和setter函数的调用频率更高。
语法如下：

ng-model-options="{ getterSetter: true }"

将此添加到输入选项卡。
【AngularJS ng-model指令用法详解】例子：

< 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 = 'lsbin'; name1 = ""; $scope.user = { name: function(Name) { return arguments.length ? (name = Name) : name; }, name1: function(Name1) { return arguments.length ? (name1 = Name1) : name1; } }; }]); < / script > < / body > < / html >

在这里, 我们通过字符串初始化了名称极客和名称1用一个空字符串。