Question

任何人都可以通过简单的代码帮助我理解AngularJS中数据绑定的两种方式。

Answer 1

单向数据绑定 -

模型值会自动分配给通过数据绑定表示法指定的HTML占位符元素，但 HTML元素不会更改模型中的值（单向）。

示例：

控制器：

app.controller('MainCtrl', function($scope) {
   $scope.firstName = 'John'; 
});

HTML ：

<span>First name:</span> {{firstName}}<br />

双向数据绑定 -

模型值会自动分配给通过数据绑定表示法指定的HTML占位符元素，其中 HTML元素可以更改模型中的值（双向）。

示例：

控制器：

app.controller('MainCtrl', function($scope) {
   $scope.firstName = 'John'; 
});

HTML 的

<span>First name:</span> {{firstName}}<br />
<span>Set the first name: <input type="text" ng-model="firstName"/></span><br />

在上面的例子中，我们可以借助HTML Input元素更改firstName模型值。

工作示例：http://plnkr.co/edit/GxqBiOoNFuECn55R4uJZ?p=preview

Answer 2

取自AngularJS homepage（2015.06.02）：

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

这可能是Angular中双向数据绑定的最简单示例 <input>与yourName 模型相关联，并且相同的模型用于填充<h1>标记的内容。修改一个将自动更新另一个。

虽然示例中的数据绑定可以被视为单向，但由于您无法直接修改<h1>，这应该可以帮助您入门。 AngularJS文档和教程包含许多很棒的资源。

AngularJS中双向数据绑定的简单实用示例

2 个答案: