> For the complete documentation index, see [llms.txt](https://xiaoxiami.gitbook.io/angularjs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://xiaoxiami.gitbook.io/angularjs/shu_ju_bang_ding.md).

# 数据绑定

* 数据绑定可自动将model和view间的数据同步。
* Angular实现数据绑定的方式，可以让我们把model当作程序中唯一可信的数据来源。view始终是model的投影。当model发生变化时，会自动反映到view上。
* Angular的 ng 的一大特点，就是数据双向绑定。

## 经典模板系统中的数据绑定

![](/files/-LfnTGAUl-7Wsd9N63vP)

* 大多数模板系统中的数据绑定都是单向的
* 把模板与model合并在一起变成view，如果在合并之后，model发生了变化，不会自动反映到view上。
* 用户在view上的交互也不会反映到model中，开发者必须写大量代码不断地在view与model之间同步数据。

## Anguarjs 模板中的数据绑定

![](/files/-LfnTGAWJJl4GS19d55s)

* 模板是在浏览器中编译的，在编译阶段产生了一个实时更新(live)的视图
* 不论在model或是view上发生了变化，都会立刻反映到对方。
* model成为程序中唯一真实的数据来源，极⼤大地简化了开发者需要处理的编程模型。\*

**数据双向绑定例子：**

```markup
<body ng-app>

    <!--
        view => 12131
        model => 12131
        3个 view
        数据是双向绑定的
    -->
    <input type="text" ng-model="name" value=""/>

    <!--angular的表达式-->
    {{ name }}

    <input type="text" ng-model="name" value=""/>

   <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</body>
```

**效果：**

![](/files/-LfnTGAY_VBRbuLKZsHl)
