一次五分钟 angularJS （1）—— Binding

时间 2019-11-11

标签一次五分 5分 angularjs binding 栏目 AngularJS 繁體版

原文原文链接

引用angularjsjavascript

须要使用AngularJS，须要引用AngularJS的文件css

ng-apphtml

要将angular用到页面绑定的时候，咱们须要指明它的做用域。java

在上图中，ng-app="" 表示咱们如今演示的angular的做用域在该<div>标签以内。固然咱们也能够将ng-app=""写在<body>标签上。写在哪一个标签，咱们的angular语法就支持在哪。angularjs

接下来，咱们看看效果app

能够看出，<div>中的{{2+2}}就被解析成4了，而<div>外的{{2+2}}则原样输出。spa

表达式htm

在angular语法中，{{}}中的内容即为表达式，能够做通常javascript语法处理。blog

Bindingip

咱们在页面上添加一个<input>，但愿<input>输入什么，{{}}表达式就显示什么。

看看效果

能够看到文本框中输入什么，“Hello”后面就会显示文本框中的内容，这就是angular中的binding

其中ng-model的值，至关于定义了一个变量，该变量名为name。若是该变量不存在则建立它。该变量的值绑定在当前的<input>标签的value属性值上。

{{name}}则表示读取ng-model对应的变量name的值，即<input>的value。

示例

在html页面上添加2个css样式，分别是显示红色和绿色。

将<span>的class属性与文本框的值进行绑定，如今咱们在文本框中输入red，green后看看效果

原创博客，未经容许，请勿转载。