AngularJs---表达式

       Angular Js是由google创建的一种Javascript框架; 

       Angular Js表达式把数据绑定到Html页面,输出结果;

 1、概念:

        写在双大括号内{{ }};

        当把数据绑定到Html页面是与ng-bind基本一样;

        数据输出在写表达式的位置;

        与js表达式差不多;

2、表达式书写

    ng-app:定义一个应用程序;

    ng-init:初始化应用程序的变量;

   1)数字表达式:

<div ng-app="" ng-init="num1=4"; num2=5>
     <p>sum:{{num1 + num2"}}</p>
</div>

       用ng-bind时:

<div ng-app="" ng-init="num1=4"; num2=5>
     <p>sum: <span ng-bind = "num1 + num2"></span></p>
</div>

      输出结果为:

//输出结果
sum:9

    无论使用AngularJs还是使用ng-bind,用法都差不多,输出的结果都一样,以下都是如此;  

      2)字符串表达式:

<div ng-app="" ng-init="num1='Mary'; num2=Jhon">
     <p>name:{{num1 +' '+ num2"}}</p>
</div>

        输出结果:

//输出结果
name:Mary Jhon

     3)数组表达式:

<div ng-app="" ng-init="array=[1,2,3,4,5,6,7,8]">
    <p>下标为5的值是:{{array[5]}}</p>
</div>

       输出结果为:

//输出结果
下标为5的值是:6

   4)对象表达式:

<div ng-app="" ng-init="Person={name:zhangsan, age:22}">
  <p>该人的年龄为:{{Person.name}}</p>
</div>

    输出结果为:

//结果为
该人的年龄为:22

  

3、AngularJs表达式类似与JS表达式,包含变量、字母、操作符;但是与JS也有一定的区别,AngularJs可以写在Html中,一般不用于判断语句。

猜你喜欢

转载自qiannianhua.iteye.com/blog/2258281