• Angular JS学习之表达式


    1.Angular JS使用表达式把数据绑定到HTML;

    2.Angular JS表达式写在双大括号中:{{expression}}

     **Angular JS表达式把数据绑定到HTML,这与ng-bind指令有异曲同工之妙;

    **Angular JS将在表达式书写的位置“输出”数据

    **Angular JS表达式很像javascript表达式:它们可以包含文字,运算和变量;

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <script src=http://apps.bding.com/libs/angular.js/1.4.6/angular.min.js></script>

    </head>

    <body>

    <div ng-app="">

      <p>我的第一个表达式:{{5+5}}</p>

    </div>

    </body>

    </html>

    3.Angular JS数字:

    <div ng-app="" ng-init="quantity=1;cost=5">

    <p>总价:{{quantity*cost}}</p>

    </div>

    或使用ng-bind:

    <div ng-app="" ng-init="quantity=1;cost=5;">

    <p>总价:<span ng-bind="quantity*cost"></span></p>

    </div>

    4.Angular JS字符串:

    <div ng-app="" ng-init="firstName='John';lastNmae='Doe'">

    <p>姓名:{{firstName+""+lastName}}</p>

    </div>

    或使用ng-bind:

    <div ng-app="" ng-init="firstName='John';lastName='Doe'">

    <p>姓名:<span ng-bind="firstName+' '+lastName"></span></p>

    </div>

    5.Angular JS对象:

    <div ng-app=""   ng-init="person={firstName:'John',lastName:'Doe'}">

    <p>姓名:{{person.lastName}}</p>

    </div>

    或使用ng-bind:

    <div ng-app=""  ng-init="person={firstName:'John', lastName:'Doe'}">

    <p>姓名:<span  ng-bind="person.lastName"></span></p>

    </div>

    6.Angular JS 数组:

    <div ng-app="" ng-init="points=[1,15,19,2,40]">

    <p>第三个值为:{{poins[2]}}</p>

    </div>

    或使用ng-bind:

    <div ng-app="" ng-init="points=[1,15,19,2,40]">

    <p>第三个值为:<span ng-bind="points[2]"></span></p>

    </div>

    7.AngularJS表达式与javascript表达式:

    **类似于javascript表达式,AngularJS表达式可以包含字母,操作符,变量;

    **与javascript表达式不同,AngularJS表达式可以写在HTML中;

    **与javascript表达式不同,AngularJS表达式不支持条件判断,循环及异常;

    **与javascript表达式不同,AngularJS表达式支持过滤器;

  • 相关阅读:
    Qt中修改QtoolTip的样式
    字符编码笔记:ASCII、Unicode和UTF-8
    UML类图关系模式(C++代码说明)
    sql标签和include标签的使用
    mybatis动态SQL标签的用法
    <!CDATA[ ....... ]] > 用法详解
    Mybatis 中$与#的区别
    枚举
    ExtJs如何判断form表单是否被修改过详解
    Extjs二级联动combo省城市
  • 原文地址:https://www.cnblogs.com/hqutcy/p/6045571.html
Copyright © 2020-2023  润新知