AngularJS 如何使用ng-model显示不同的输入元素值

在本文中，我们将介绍如何使用AngularJS的ng-model指令来显示不同的输入元素值。ng-model是AngularJS中一个非常重要的指令，它用于将数据绑定到HTML元素，并实现双向数据绑定。

什么是ng-model？

ng-model是AngularJS中的一个指令，它用于将数据绑定到HTML元素。通过使用ng-model，我们可以实现表单元素值与 $scope对象属性之间的双向绑定。这样，当用户在表单元素中输入数据时，不仅会更新表单元素的值，也会自动更新$ scope对象中的属性值。

如何显示不同的输入元素值？

下面我们通过几个示例来说明如何使用ng-model显示不同的输入元素值。

示例1：文本框和div之间的数据绑定

HTML代码如下：

<input type="text" ng-model="name">
<div>{{name}}</div>

在这个示例中，我们定义了一个文本框和一个div元素。通过ng-model指令，我们将文本框的值与$scope对象中的name属性进行双向绑定。当用户在文本框中输入数据时，div元素的内容会实时更新为文本框中的值。

示例2：下拉列表框和文本框之间的数据绑定

HTML代码如下：

<select ng-model="selectedFruit">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>
<input type="text" ng-model="selectedFruit">

在这个示例中，我们定义了一个下拉列表框和一个文本框。通过ng-model指令，我们将下拉列表框和文本框的值与$scope对象中的selectedFruit属性进行双向绑定。当用户选择下拉列表框中的选项时，文本框中的值会自动更新为所选选项的值。

示例3：单选按钮和复选框之间的数据绑定

HTML代码如下：

<input type="radio" ng-model="gender" value="male">Male
<input type="radio" ng-model="gender" value="female">Female
<br>
<input type="checkbox" ng-model="remember">Remember me

在这个示例中，我们定义了两个单选按钮和一个复选框。通过ng-model指令，我们将单选按钮的值与 $scope对象中的gender属性进行绑定，将复选框的值与$ scope对象中的remember属性进行绑定。当用户选择单选按钮或复选框时，相应的属性值会进行更新。