srcmini本文概述
数据绑定是软件开发技术中使用的非常有用且功能强大的功能。它充当应用程序的视图和业务逻辑之间的桥梁。
AngularJS遵循双向数据绑定模型。
单向数据绑定
单向数据绑定是一种从数据模型中获取值并将其插入HTML元素的方法。无法从视图更新模型。它在经典模板系统中使用。这些系统仅在一个方向上绑定数据。
双向数据绑定
Angular应用程序中的数据绑定是模型和视图组件之间的数据自动同步。
数据绑定使你可以将模型视为应用程序中的单一事实来源。该视图始终是模型的投影。如果模型发生更改，则视图将反映更改，反之亦然。
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-init="firstName='Ajeet'">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
</body>
</html>在上面的示例中，{{firstName}}表达式是AngularJS数据绑定表达式。 AngularJS中的数据绑定将AngularJS表达式与AngularJS数据绑定。
{{firstName}}与ng-model =“ firstName”绑定。
让我们再举一个例子，其中两个文本字段与两个ng-model指令绑定在一起：
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div data-ng-app="" data-ng-init="quantity=1;price=20">
<h2>Cost Calculator</h2>
Quantity: <input type="number" ng-model="quantity">
Price: <input type="number" ng-model="price">
<p><b>Total in rupees:</b> {{quantity * price}}</p>
</div>
</body>
</html>
评论前必须登录！
注册