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表达式支持过滤器;

  • 相关阅读:
    Redis系统管理
    Redis简介和安装
    在Azure中搭建Ghost博客并绑定自定义域名和HTTPS
    ML:单变量线性回归(Linear Regression With One Variable)
    PRML Chapter4
    Windows+Idea安装Hadoop开发环境
    包装类
    认识J2SE
    Spark基本原理
    SQL总结
  • 原文地址:https://www.cnblogs.com/hqutcy/p/6045571.html
Copyright © 2011-2022 走看看