AngularJS【04】AngularJS 表达式

AngularJS 表达式


AngularJS
使用 表达式 把数量绑定到
HTML。


AngularJS 表达式

AngularJS
表达式写于对大括号内:{{ expression }}

AngularJS
表达式把数量绑定到 HTML,这同 ng-bind 指令发出异曲同工之精。

AngularJS
将在表达式书写的位置”输出”数据。

AngularJS
表达式
 很像 JavaScript
表达式
:它们可涵盖文字、运算符和变量。

实例 {{ 5 +
5 }} 或 {{ firstName + ” ” + lastName }}

 

 

 

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <div ng-app="">
  5. <p>我的第一个表达式:{{5+5}}</p>
  6. </div>
  7. <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
  8. </body>
  9. </html>

AngularJS 1

 

魔芋练习:

  1. <div class="moyu" ng-app="" ng-init="moyuName='mo'">
  2. <input class="ceshi" ng-model ="moyu" type="text">
  3. {{moyuName}}
  4. </div>

AngularJS 2

 

 

 

 


AngularJS 数字

AngularJS
数字就是如 JavaScript 数字:

  1. <div ng-app="" ng-init="quantity=1;cost=5">
  2. <p>总价:{{ quantity * cost }}</p>
  3. </div>

 


ng-bind 的等同实例:

 

  1. <div ng-app="" ng-init="quantity=1;cost=5">
  2. <p>总价:</p>
  3. </div>

 

 

 

  使用 ng-init 不是很常见。

AngularJS 字符串

AngularJS
字符串就比如 JavaScript 字符串:

 

  1. <div ng-app="" ng-init="firstName='John';lastName='Doe'">
  2. <p>姓名:{{ firstName +" "+ lastName }}</p>
  3. </div>

 

 


ng-bind 的平等实例:

  1. <div ng-app="" ng-init="firstName='John';lastName='Doe'">
  2. <p>姓名:</p>
  3. </div>

 

 


AngularJS 对象

AngularJS
对象就是比如 JavaScript 对象:

  1. <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
  2. <p>姓为{{ person.lastName }}</p>
  3. </div>

 


ng-bind 的如出一辙实例:

  1. <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
  2. <p>姓为</p>
  3. </div>

 

 


AngularJS 数组

AngularJS
数组就如 JavaScript 数组:

  1. <div ng-app="" ng-init="points=[1,15,19,2,40]">
  2. <p>第三个值为{{ points[2]}}</p>
  3. </div>

 

采取
ng-bind 的均等实例:

  1. <div ng-app="" ng-init="points=[1,15,19,2,40]">
  2. <p>第三个值为</p>
  3. </div>

 


AngularJS 表达式 与 JavaScript 表达式

仿佛于
JavaScript 表达式,AngularJS 表达式可以涵盖字母,操作符,变量。


JavaScript 表达式不同,AngularJS 表达式可以形容以 HTML
中。(魔芋:通过双括声泪俱下{{}})


JavaScript 表达式不同,AngularJS
表达式不支持标准化判断,循环和特别。


JavaScript 表达式不同,AngularJS 表达式支持过滤器。

=

 

=

相关文章