宝哥软件园

AngularJS双向数据绑定解释了一个简单的例子

编辑:宝哥软件园 来源:互联网 时间:2021-09-14

Angular的双向数据绑定,个人认为是指如果通过model建立了一个数据模型,视图上的数据会相应的存储在angular程序中,视图上的数据变化会和model同步,model的数据变化也会和视图同步。

以下演示演示演示了:

!DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title hello,AngularJS!/title script src=' http : angular . js '/script/head body div ng-app!- ng-model指令将表单的值绑定到模型的用户名变量-输入ng-model=' username ' type=' text ' placeholder='请输入.p您好,strong { {用户名}}/strong!/p /div/body/html运行结果:程序运行后,在输入框中输入文本,以下内容与输入框内容同步变化。是不是很神奇!以前,需要编写一大段js代码(侦听onchange事件,并将输入值赋给下面的强元素),但现在只需一条ng-model指令就可以完成。Perferct!

详细案例说明:

1.ng-model指令的作用:建立一个数据模型,其中有一个变量username来存储值;输入元素的;

2.{{username}}是一个表达式,angular会自动计算并替换为相应的值。

3.手动输入文本,输入元素的值会改变,并自动同步到模型的usename变量。{{username}}从模型中读取username的值,因此以下强元素的内容会相应地改变。

Angular帮助我们同步了数据。

感谢您的阅读,希望对大家有所帮助,感谢您对本网站的支持!

更多资讯
游戏推荐
更多+