如何在 AngularJS 中使用“ng-model” (附示例)
James Hartman AngularJs 中的 ng-model 是什么？
ng-model 是 Angular.JS 中的一个指令，它代表模型，其主要目的是将“视图”绑定到“模型”。
例如，假设您想向最终用户呈现一个简单的页面，如下所示，该页面要求用户在文本框中输入“名字”和“姓氏”。然后，您希望确保将用户输入的信息存储在数据模型中。
您可以使用 ng-model 指令将“名字”和“姓氏”的文本框字段映射到数据模型。
ng-model 指令将确保“视图”中的数据和“模型”中的数据始终保持同步。
ng-model 属性
正如本章引言中所讨论的，ng-model 属性用于将模型中的数据绑定到呈现给用户的视图。
ng-model 属性用于：
- 将视图中的控件（如 input、textarea 和 selects）绑定到模型。
- 提供验证行为 – 例如，可以向文本框添加一个验证，使其只能输入数字字符。
- ng-model 属性维护控件的状态（通过状态，我们指的是控件和绑定的数据始终保持同步。如果我们的数据值发生更改，它将自动更改控件中的值，反之亦然）。
如何使用 ng-model
1) 文本区域
textarea 标签用于定义多行文本输入控件。textarea 可以容纳无限数量的字符，文本以固定宽度的字体呈现。
现在让我们看一个简单的例子，说明如何将 ng-model 指令添加到 textarea 控件。
在此示例中，我们想展示如何将多行字符串从控制器传递到视图，并将该值附加到 textarea 控件。
<!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>
Topic Description:<br> <br>
<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”控件。 “pDescription”变量将实际包含传递到 textarea 控件的文本。我们还提到了 textarea 控件的两个属性：rows=4 和 cols=50。提到这些属性是为了显示多行文本。通过定义这些属性，textarea 现在将具有 4 行和 50 列，以便显示多行文本。
- 在这里，我们将成员变量附加到名为“pDescription”的 scope 对象，并为该变量设置一个字符串值。
- 请注意，我们在字符串中放置了 /n 字面量，以便文本在 textarea 中显示时可以包含多行。/n 字面量将文本拆分为多行，以便在 textarea 控件中作为多行文本呈现。
如果代码成功执行，在浏览器中运行代码时将显示以下输出。
输出
从输出中，
- 可以清楚地看到，作为 scope 对象一部分的 pDescription 变量的值已传递到 textarea 控件。
- 随后，它在页面加载时显示出来。
2) 输入元素
ng-model 指令也可以应用于 input 元素，例如文本框、复选框、单选按钮等。
让我们看一个如何将 ng-model 与“textbox”和“checkbox”输入类型一起使用的示例。
在这里，我们将有一个名为“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>
Topic Description:<br> <br>
Name : <input type="text" ng-model="pname"><br>
Topic : <br>
<input type="checkbox" ng-model="Topic.Controller">Controller<br>
<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”的成员变量附加到 input 类型文本控件。 “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 元素，并用于填充 select 列表中的列表项。
让我们看一个如何将 ng-model 与 select 输入类型一起使用的示例。
在这里，我们将有一个名为“Guru99”的文本输入类型，并且将有一个带有“Controller”和“Models”两个列表项的 select 列表。
<!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>
Topic Description:<br> <br>
Name : <input type="text" ng-model="pName" value="Guru99"><br>
Topic : <br>
<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”的成员变量附加到 select 类型控件。在 select 控件内部，对于每个选项，我们将第一个选项的成员变量附加为 Topics.option1，将第二个选项的成员变量附加为 Topics.option2。
- 在这里，我们定义了 Topics 数组变量，它包含 2 个键值对。第一个键值对的值是“Controllers”，第二个键值对的值是“Models”。这些值将传递到视图中的 select 输入标签。如果代码成功执行，将显示以下输出。
输出
从输出中可以看出，赋给 pName 变量的值是“Guru99”，我们可以看到 select 输入控件具有“Controllers”和“Models”选项。
摘要
- Angular JS 中的模型由 ng-model 指令表示。该指令的主要目的是将视图绑定到模型。如何使用 ng-app、ng-controller 和 ng-model 指令构建一个简单的控制器。
- ng-model 指令可以链接到“textarea”输入控件，并将多行字符串从控制器传递到视图。
- ng-model 指令可以链接到 input 控件（如文本和复选框控件），使其在运行时更具动态性。
- ng-model 指令还可以用于用选项填充 select 列表，这些选项可以显示给用户。
