AngularJS 双向数据绑定详解简单实例-tutorial js-php.cn

AngularJS 双向数据绑定详解简单实例

高洛峰

Lepaskan： 2016-12-24 10:30:18

asal

1175 orang telah melayarinya

angular的双向数据绑定，个人理解是，通过model建立数据模型，那么视图上的数据就会对应存储在angular程序里，视图上的数据变化会同步到model，model的数据改变也会同步到视图。

下面的demo演示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>hello, AngularJS!</title>
  <script src="angular.js"></script>
</head>
<body>
  <div ng-app>
    <!-- ng-model指令将表单的value绑定到model的username变量-->
    <input ng-model="username" type="text" placeholder="请输入...">
    <p>Hello, <strong>{{username}}</strong>!</p>
  </div>
</body>
</html>

Salin selepas log masuk

运行结果：程序运行后，在输入框输入文字，下面会与输入框内容同步变化。是不是很惊奇！以前需要写一大段js代码的事情（监听onchange事件，将input的value赋给下面的strong元素），现在只用一个ng-model指令就完成了。Perferct!

AngularJS 双向数据绑定