angularjs数据绑定 angularjs数据绑定|AngularJS教程

本文概述

单向数据绑定
双向数据绑定

数据绑定是软件开发技术中使用的非常有用且功能强大的功能。它充当应用程序的视图和业务逻辑之间的桥梁。
AngularJS遵循双向数据绑定模型。
单向数据绑定【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>