AngularJS ngModel.modelValue和ngModel.viewValue的区别

在本文中，我们将介绍AngularJS中ngModel.modelValue和ngModel.viewValue的区别。这两个属性是AngularJS表单中常用的属性，用于实现双向数据绑定和显示输入框的值等功能。

阅读更多：AngularJS 教程

ngModel.$modelValue

ngModel.modelValue是指表单控件的实际值，也可以称为数据模型值。它是从作用域（scope）中获取的，用于保存表单控件的值，不管用户是否进行了任何输入或修改。此值在每次数据绑定时都会更新，并可以在控制器中使用。

让我们通过一个示例来理解ngModel.modelValue的概念。假设我们有一个输入框，其双向绑定到了一个作用域变量name：

<input type="text" ng-model="name">

在控制器中，我们可以访问ngModel.$modelValue来获取输入框的值：

$scope.name // ngModel.$modelValue

当用户输入姓名后，ngModel.modelValue将自动更新为输入框中的值。即使用户没有点击确认按钮，ngModel.modelValue也会始终保存最新的值。

ngModel.$viewValue

ngModel.viewValue是指表单控件的显示值，也可以称为视图值。它是为了显示（即渲染）当前表单控件的值而存在的。ngModel.viewValue的更新与用户输入或选择的变化密切相关。它在每次用户与控件进行交互时都会更新。

继续以输入框为例，我们再次关注双向绑定到作用域变量name，但这次我们想要显示一个大写的版本：

<input type="text" ng-model="name" ng-change="toUppercase()">

在控制器中，我们可以使用ngModel.$viewValue来获取显示在输入框中的值：

$scope.toUppercase = function() {
  $scope.name = $scope.name.toUpperCase(); // 更新ngModel.$modelValue
  ngModel.$setViewValue($scope.name); // 更新ngModel.$viewValue
  ngModel.$render(); // 重新渲染输入框的显示值
}

在上面的示例中，我们使用ng-change指令绑定了一个函数，该函数会将输入框中的值转换为大写，并更新ngModel.modelValue和ngModel.viewValue。然后使用ngModel.render()来重新渲染输入框的显示值。

需要注意的是，ngModel.modelValue和ngModel.viewValue是双向绑定的，它们会相互影响。通过更新ngModel.modelValue，我们可以更新ngModel.viewValue，而通过ngModel.viewValue的变化，也可以更新ngModel.$modelValue。

总结

在本文中，我们介绍了AngularJS中ngModel.modelValue和ngModel.viewValue的区别。ngModel.modelValue是表单控件的实际值，保存在作用域中，不管用户是否进行了输入或修改。而ngModel.viewValue是表单控件的显示值，用于渲染控件的当前值，并且它会实时更新用户的输入或选择。这两个属性是实现双向数据绑定和控件显示值更新的关键。在开发AngularJS应用程序时，了解它们的区别以及正确使用它们非常重要。