如何在 AngularJS 中使用“ng-model”的示例

AngularJs 中的 ng-model 是什么？

ng-model 是 Angular.JS 中的一个代表模型的指令，其主要目的是将“视图”绑定到“模型”。

例如，假设您想向最终用户呈现一个简单的页面，如下所示，要求用户在文本框中输入“名字”和“姓氏”。然后您想确保将用户输入的信息存储在您的数据模型中。

您可以使用 ng-model 指令将“名字”和“姓氏”文本框字段映射到您的数据模型。

ng-model 指令将确保“视图”中的数据和“模型”中的数据始终保持同步。

ng-model 属性

正如本章介绍中所讨论的，ng-model 属性用于将模型中的数据绑定到呈现给用户的视图。

ng-model 属性用于：

将视图中的输入、文本区域和选择等控件绑定到模型中。
提供验证行为——例如，可以向文本框添加验证，即只能在文本框中输入数字字符。
ng-model 属性维护控件的状态（状态的意思是控件和数据必须始终保持同步。如果数据的值发生变化，它将自动改变控件中的值，反之亦然）

如何使用 ng-model

1）文本区域

文本区域标签用于定义多行文本输入控件。文本区域可以容纳无限数量的字符，并且文本以固定宽度的字体呈现。

现在让我们看一个简单的例子，了解如何将 ng-model 指令添加到文本区域控件。

在这个例子中，我们要展示如何将多行字符串从控制器传递到视图，并将该值附加到文本区域控件。

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>

<div ng-app="DemoApp" ng-controller="DemoCtrl">
	<form>
		&nbsp;&nbsp;&nbsp;Topic Description:<br> <br>
		&nbsp;&nbsp;&nbsp;
	<textarea rows="4" cols="50" ng-model="pDescription"></textarea><br><br> 
	</form>
</div>

<script>
	var app = angular.module('DemoApp',[]);
	app.controller('DemoCtrl', function($scope){
		$scope.pDescription="This topic looks at how Angular JS works \nModels in Angular JS"});
</script>

</body>
</html>

代码说明：

这个 ng-model 指令 用于附加名为“pDescription”添加到“textarea”控件。“pDescript“ion” 变量实际上将包含文本，该文本将传递到文本区域控件。我们还提到了 textarea 控件的 2 个属性，即 rows=4 和 cols=50。提到这些属性是为了让我们能够显示多行文本。通过定义这些属性，textarea 现在将有 4 行和 50 列，因此它可以显示多行文本。
这里我们将成员变量附加到名为“pDescription”并将字符串值放入变量中。
请注意，我们将 /n 文字放入字符串中，以便文本在文本区域中显示时可以有多行。 /n 文字将文本拆分为多行，以便它可以在 textarea 控件中呈现为多行文本。

如果代码成功执行，则在浏览器中运行代码时将显示以下输出。

输出：

从输出来看，

可以清楚地看到，分配给 p 的值Description 变量作为范围对象的一部分被传递给 textarea 控件。
随后，它已经在页面加载时显示。

2）输入元素

ng-model 指令还可以应用于输入元素，例如文本框、复选框、单选按钮等。

让我们看一个例子，了解如何将 ng-model 与“textbox”和“checkbox”输入类型一起使用。

这里我们将有一个名为“Guru99”的文本输入类型，并且会有 2 个复选框，一个默认被标记，另一个不会被标记。

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
	<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
</head>
<body >
<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoCtrl">
	<form>
		&nbsp;&nbsp;&nbsp;Topic Description:<br> <br>
		&nbsp;&nbsp;&nbsp;
        
		Name : <input type="text" ng-model="pname"><br>
		&nbsp;&nbsp;&nbsp;
		Topic : <br>&nbsp;&nbsp;&nbsp;
		<input type="checkbox" ng-model="Topic.Controller">Controller<br>&nbsp;&nbsp;&nbsp;
		<input type="checkbox" ng-model="Topic.Models">Models
	</form>
	</div>

<script>
	var app = angular.module('DemoApp',[]);
	app.controller('DemoCtrl', function($scope){
		$scope.pname="Guru99";
        
		$scope.Topic =
		{
			Controller:true,
			Models:false
		};     });
</script>

</body>
</html>

代码说明：

这个 ng-model 指令 用于将名为“pname”的成员变量附加到输入类型文本控件。“pname”变量将包含“Guru99”的文本，该文本将传递给文本输入控件。请注意，可以为成员变量的名称赋予任何名称。
这里我们定义了第一个复选框“Controllers”，它附加到成员变量 Topics.Controllers。该复选框将标记为此检查控件。
这里我们定义了第一个复选框“Models”，它被附加到成员变量Topics.Models。该复选框不会被标记为该检查控件。
这里我们附加名为“pName”的成员变量并输入字符串值“Guru99”。
我们声明一个名为“Topics”的成员数组变量并赋予它两个值，第一个是“true”，第二个是“false”。因此，当第一个复选框的值为true时，该复选框将被标记为该控件，同样，由于第二个值为false，该复选框将不会被标记为该控件。

如果代码成功执行，则在浏览器中运行代码时将显示以下输出。

输出：

从输出来看，

可以清楚的看到，赋给 pName 变量的值是“Guru99”
由于第一个检查值为“true”，因此通过了，复选框被标记为“Controllers”复选框。同样，由于第二个值为 false，因此复选框未被标记为“Models”复选框。

3）从下拉列表中选择元素

ng-model 指令也可以应用于 select 元素并用于填充选择列表中的列表项。

让我们看一个例子来了解如何将 ng-model 与选择输入类型一起使用。

这里我们将有一个名为“Guru99”的文本输入类型，并且会有一个包含“控制器”和“模型”两个列表项的选择列表。

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
	<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
</head>
<body >
<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoCtrl">
	<form>
		&nbsp;&nbsp;&nbsp;Topic Description:<br> <br>
		&nbsp;&nbsp;&nbsp;
        
		Name : <input type="text" ng-model="pName" value="Guru99"><br>
		&nbsp;&nbsp;&nbsp;
		Topic : <br>&nbsp;&nbsp;&nbsp;
        
		<select ng-model="Topics">
		<option>{{Topics.option1}}</option>
		<option>{{Topics.option2}}</option>
		</select>
	</form>
	</div>

<script>
	var app = angular.module('DemoApp',[]);
	app.controller('DemoCtrl', function($scope){
	$scope.pName="Guru99";
        
		$scope.Topics =
		{
			option1 : "Controller",
			option2 : "Module"
		};     });
</script>

</body>
</html>

这个 ng-model 指令 用于将名为“Topics”的成员变量附加到选择类型控件。在选择控件内部，对于每个选项，我们将为第一个选项附加成员变量 Topics.option1，为第二个选项附加成员变量 Topics.option2。
这里我们定义了包含 2 个键值对的 Topics 数组变量。第一对的值为“Controllers”，第二对的值为“Models”。这些值将传递到视图中的选择输入标签。如果代码成功执行，将显示以下输出。

输出：

从输出中可以看出，分配给 pName 变量的值是“Guru99”，并且我们可以看到选择输入控件有“Controllers”和“Models”选项。

结语

Angular JS 中的模型由 ng-model 指令表示。此指令的主要目的是将视图绑定到模型。如何使用 ng-app、ng-controller 和 ng-model 指令构建一个简单的控制器。
ng-model 指令可以链接到“文本区域”输入控件，并且多行字符串可以从控制器传递到视图。
ng-model 指令可以链接到输入控件，如文本和复选框控件，以使它们在运行时更加动态。
ng-model 指令还可用于填充可显示给用户的选项选择列表。

AngularJs 中的 ng-model 是什么？

ng-model 属性

如何使用 ng-model

1）文本区域

2）输入元素

3）从下拉列表中选择元素

结语

注册简报