AngularJS ng-model指令

作者 : 慕源网 本文共3228个字,预计阅读时间需要9分钟 发布时间: 2022-04-28 共374人阅读

AngularJS ng-model指令ngModel是一个绑定输入、选择和文本区域的指令,并将所需的用户值存储在一个变量中,我们可以在需要该值时使用该变量。

ngModel还用于表单的验证。

我们可以将ngModel用于:

  1. input
    • text
    • checkbox
    • radio
    • number
    • email
    • url
    • date
    • datetime-local
    • time
    • month
    • week
  2. select
  3. 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 对象有许多用于验证目的的字段。出于验证目的,我们可以添加以下类。我们只列出重要的。

  1. ng-touched
  2. ng-untouched
  3. ng-valid
  4. ng-invalid
  5. ng-dirty
  6. ng-pending
  7. 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 。


慕源网 » AngularJS ng-model指令

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录