zoukankan      html  css  js  c++  java
  • AngularJS 表达式

    1.  AngularJS使用表达式把数据绑定到HTML。

    2.  AngularJS表达式的特点:

    • 表达式写在双大括号内:{{表达式}}。
    • 表达式把数据绑定到HTML,这与ng-bind指令有异曲同工之妙。
    • 在表达式书写的位置输出数据。
    • AngularJS表达式很像javascript表达式,它们可以包含文字、运算符和变量。

    3.  第一个AngularJS表达式:要注意的是如果我们只导入了angular.js文件,但是没有使用ng-app这个指令,那么{{}}里面的表达式是没有效果的,页面上会把这是我的第一个AngularJS表达式:{{5+5}}这个整体显示。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript" src="js/angular.min.js" ></script>
        </head>
        <body ng-app="">
            <p>这是我的第一个AngularJS表达式:{{5+5}}</p>
        </body>
    </html>

    4.  AngularJS表达式中的数字:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript" src="js/angular.min.js" ></script>
        </head>
        <body ng-app="">
            <div ng-init="quantity=1;cost=5"></div>
            <p>总价:{{quantity*cost}}</p>
        </body>
    </html>

    5.  AngularJS表达式中的字符串:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript" src="js/angular.min.js" ></script>
        </head>
        <body ng-app="">
            <div ng-init="firstname='王';lastname='甘林'"></div>
            <p>姓名:{{firstname+lastname}}</p>
        </body>
    </html>

    6.  AngularJS表达式中的对象:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript" src="js/angular.min.js"></script>
        </head>
    
        <body ng-app="">
            <div ng-init="person={firstName:'王',lastName:'甘林'}">
                <p>名为:{{ person.lastName }}</p>
            </div>
        </body>
    </html>

    7.  AngularJS表达式中的数组:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript" src="js/angular.min.js"></script>
        </head>
    
        <body ng-app="">
            <div ng-init="points=[1,3,5,7,9]">
                <p>第三个值为:{{ points[2] }}</p>
            </div>
        </body>
    </html>

    8.  AngularJS表达式与javascript表达式的区别:

    • 与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。
    • 与 JavaScript 表达式不同,AngularJS 表达式不支持条件判断,循环及异常。
    • 与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。
  • 相关阅读:
    全面了解Nginx主要应用场景
    手把手教你构建 C 语言编译器
    Docker镜像原理和最佳实践
    Docker网络深度解读
    PostgreSQL 10.0 preview 功能增强
    阿里沈询:分布式事务原理与实践
    CPU、内存、IO虚拟化关键技术及其优化探索
    原理、方法双管齐下,大神带你细解Redis内存管理和优化---场景研读
    ASP.NET 5已终结,迎来ASP.NET Core 1.0和.NET Core 1.0 转
    RabbitMQ学习系列
  • 原文地址:https://www.cnblogs.com/wgl1995/p/6255748.html
Copyright © 2011-2022 走看看