双边数据绑定

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

Two-Way Data Binding ,双边数据绑定,其实就是模型发生变化以后也会更新视图的显示,模型在视图上改变以后,也会去更新模型。先打开 index.html ,在这个使用了 UserController 控制器的元素里面,我们把模型里的数据显示到了这里,这是一个单边的数据绑定,也就是,模型里的数据只是显示在了这里,模型发生变化,这里的显示也会发生变化 ...

下面,我们再试一下双边的绑定,先在这里添加两个文本框元素 ... 用一个 input 标签 ... type 的值是 text,表示这是文本类型的 input ,在这个元素上,我们用一个 ng-model ,也就是 Angulsr 的 ngModel 指令 ... 它的值设置成 user.name ... 把 user 的 name 属性的值作为这个文本框的值 ...

再添加一个文本框元素 ... 同样用一个 ng-model ... 它的值我们设置成 user.email ..

<input type="text" ng-model="user.name">
<input type="text" ng-model="user.email">

保存 ... 在浏览器里预览一下 ... 在这两个表单元素上,都会显示出各自的值 ... 现在我们可以去修改一下它们里面的值 ... 用户名这里输入 xiaoxue ... 你会看到在下面绑定的 user.name 这里,会立即显示出我们在文本框里输入的内容 ....

再修改一下这个 E-mail ... xiaoxue@ninghao.net ... 同样,在所有绑定了 user 的 email 的地方,会立即显示出修改之后的内容 ... 这个就是两边的数据绑定 ... 我们只是简单的用了一个 ng-model 指令,就可以实现这个功能。

再点一下 订阅 这个按钮 ... 在控制台上,你会看到,显示的文字里面,在绑定的数据的地方,也会使用修改之后的数据 ...

双边数据绑定《 AngularJS 基础 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点