AngularJS：使用 AngularJS 实现数据绑定和双向数据绑定-JavaScript中文网-JavaScript教程资源分享门户

AngularJS 是一个强大的 JavaScript 框架，它在前端开发中有着广泛的应用。其中，数据绑定和双向数据绑定是 AngularJS 最为重要的特性之一。本文将详细介绍如何使用 AngularJS 实现数据绑定和双向数据绑定，并提供示例代码以供参考。

数据绑定

在前端开发中，数据绑定是一个非常重要的问题。它能够实现数据和 UI 的自动同步。使用 AngularJS，我们可以轻松实现数据绑定，只需要将数据模型绑定到 View 中即可。

使用 AngularJS 实现数据绑定非常简单。首先，在数据模型中定义一个变量，然后将其绑定到 View 中，当数据模型中的变量发生变化时，View 中对应的位置会自动更新。我们可以通过以下示例代码演示：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>AngularJS 数据绑定</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
</head>

<body ng-app>

  <div>
    <input type="text" ng-model="msg">
    <br>
    <h2>{{msg}}</h2>
  </div>

</body>

</html>

在上述示例代码中，我们定义了一个 msg 变量，使用 ng-model 指令将其与一个输入框绑定起来。当我们在输入框中输入内容时，msg 变量的值会自动更新。同时，在 View 中使用 {{msg}} 语法将其显示在页面上。

双向数据绑定

单向数据绑定只能实现数据到 UI 的同步，如果我们需要实现 UI 到数据的同步，就需要使用双向数据绑定。在 AngularJS 中，双向数据绑定使用 ng-model 指令实现。我们可以通过以下示例代码演示：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>AngularJS 双向数据绑定</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
</head>

<body ng-app>

  <div>
    <input type="text" ng-model="msg">
    <br>
    <h2>{{msg}}</h2>
  </div>

</body>

</html>

在上述示例代码中，我们使用 ng-model 指令将一个输入框和一个文本框绑定起来。当我们在输入框中输入内容时，文本框中的内容也会自动更新。反之，当我们在文本框中输入内容时，输入框的内容也会自动更新。

总结

本文简要介绍了 AngularJS 中的数据绑定和双向数据绑定。通过使用 ng-model 指令，我们实现了数据和 UI 的自动同步。希望本文能够帮助初学者更好地掌握 AngularJS，写出更优秀的前端应用。

参考

AngularJS 官方文档

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653ef73f7d4982a6eb85f9b7