zoukankan      html  css  js  c++  java
  • 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表达式支持过滤器;

  • 相关阅读:
    AChartEngine方法的使用及事件汇总
    免费的Android UI库及组件推荐
    消灭Bug!十款免费移动应用测试框架推荐
    AChartEngine 安卓折线图 柱形图等利器
    添加几个有用的网址
    演示Android百度地图操作功能
    Android 如何在Eclipse中查看Android API源码 及 support包源码
    Android入门之GPS定位详解
    软考之数据库部分
    SSE && WebSockets
  • 原文地址:https://www.cnblogs.com/hqutcy/p/6045571.html
Copyright © 2011-2022 走看看