AngularJS ng-model 指令
ng-model 是 AngularJS 中最常用的指令之一，它用于在视图与模型之间创建双向数据绑定。使用 ng-model，你可以将 HTML 表单控件（如输入框、复选框、单选按钮等）与 AngularJS 的模型（数据）相绑定。这样，当用户在表单中输入数据时，模型中的数据会自动更新，反之，模型数据的变化也会自动反映到视图中。
ng-model 的工作原理
- 双向数据绑定：
ng-model指令建立了一个双向数据绑定（two-way data binding）连接。通过这种绑定，模型中的数据和视图中的数据会保持同步。 - 自动更新：当用户在表单控件中进行操作（如输入文本、选择选项等）时，AngularJS 会自动将控件的值同步到绑定的模型中。
- 表单控件：
ng-model可以与各种表单控件一起使用，包括<input>、<textarea>、<select>、<checkbox>等。
基本示例
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>ng-model 示例</title>
</head>
<body ng-controller="myController">
<h1>用户信息</h1>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" ng-model="user.name">
<p>用户的名字是：{{ user.name }}</p>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.user = { name: '张三' };
});
</script>
</body>
</html>
在这个例子中：
ng-model="user.name"将输入框与 AngularJS 模型中的user.name绑定。- 当用户在输入框中输入新的名字时，
user.name会自动更新。 - 视图中的
{{ user.name }}会自动显示模型中的name。
ng-model 的常见用法
- 与文本框结合使用：
ng-model通常与<input>元素结合使用，实现文本输入框与 AngularJS 模型的双向数据绑定。
<div ng-app="myApp" ng-controller="myController"> <input type="text" ng-model="name"> <p>您输入的名字是: {{ name }}</p> </div> <script> var app = angular.module('myApp', []); app.controller('myController', function($scope) { $scope.name = '李四'; }); </script> - 与复选框结合使用：
ng-model还可以与复选框 (<input type="checkbox">) 一起使用，它会根据复选框的选中状态自动更新模型中的值（true或false）。
<div ng-app="myApp" ng-controller="myController"> <input type="checkbox" ng-model="isChecked"> 是否同意条款 <p>是否同意：{{ isChecked }}</p> </div> <script> var app = angular.module('myApp', []); app.controller('myController', function($scope) { $scope.isChecked = false; }); </script>在这个示例中，ng-model="isChecked"将复选框的状态绑定到isChecked变量。如果复选框被选中，isChecked的值会变为true，否则为false。 - 与单选按钮结合使用：
ng-model可以与单选按钮 (<input type="radio">) 一起使用，使得选中的单选按钮的值会自动绑定到模型。
<div ng-app="myApp" ng-controller="myController"> <label><input type="radio" ng-model="selectedOption" value="A"> 选项 A</label> <label><input type="radio" ng-model="selectedOption" value="B"> 选项 B</label> <p>您选择的是: {{ selectedOption }}</p> </div> <script> var app = angular.module('myApp', []); app.controller('myController', function($scope) { $scope.selectedOption = 'A'; }); </script>在这个示例中，ng-model="selectedOption"将选中的单选按钮的值绑定到selectedOption变量。如果用户选择了A，selectedOption的值为'A'，如果选择了B，则为'B'。 - 与下拉菜单结合使用：
ng-model可以与<select>元素结合使用，绑定选中的值。
<div ng-app="myApp" ng-controller="myController"> <select ng-model="selectedColor"> <option value="red">红色</option> <option value="green">绿色</option> <option value="blue">蓝色</option> </select> <p>您选择的颜色是: {{ selectedColor }}</p> </div> <script> var app = angular.module('myApp', []); app.controller('myController', function($scope) { $scope.selectedColor = 'red'; }); </script>在这个示例中，ng-model="selectedColor"会将<select>元素中选中的值绑定到selectedColor变量。
ng-model 其他功能
- 初始化值：
ng-model可以与 AngularJS 控制器中的模型数据（如$scope对象）一起使用，初始化数据。
- 表单验证：
ng-model与表单控件结合使用时，AngularJS 会自动执行表单验证。如果控件的值无效，它会更新控件的valid或invalid状态，并在 HTML 中添加相应的 CSS 类。
<div ng-app="myApp" ng-controller="myController"> <form name="myForm"> <input type="email" ng-model="email" name="email" required> <span ng-show="myForm.email.$invalid && myForm.email.$touched">邮箱格式不正确</span> </form> </div> <script> var app = angular.module('myApp', []); app.controller('myController', function($scope) { $scope.email = ''; }); </script>这个例子展示了如何使用ng-model结合表单验证来确保用户输入的是有效的邮箱格式。 - ng-model 与
ng-change配合使用：ng-model可以与ng-change配合使用，当模型数据发生变化时触发一个函数或表达式。
<div ng-app="myApp" ng-controller="myController"> <input type="number" ng-model="quantity" ng-change="calculateTotal()"> <p>数量: {{ quantity }}</p> <p>总价: {{ total }}</p> </div> <script> var app = angular.module('myApp', []); app.controller('myController', function($scope) { $scope.quantity = 1; $scope.total = 0; $scope.calculateTotal = function() { $scope.total = $scope.quantity * 100; // 假设每个商品的单价是 100 }; }); </script>在这个例子中，当用户更改quantity时，ng-change会触发calculateTotal函数，重新计算total。
总结
ng-model是 AngularJS 用于双向数据绑定的指令，它可以将 HTML 表单控件与 AngularJS 的模型数据绑定，确保视图和模型保持同步。- 它适用于文本框、复选框、单选按钮、下拉菜单等表单控件。
ng-model使得 AngularJS 在处理表单输入时变得简单，自动同步数据并提供验证、事件处理等功能。
掌握 ng-model 能帮助你高效地管理用户输入并构建动态响应的应用程序。
发表回复