AngularJS表达式

简介:

AngularJS 表达式

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

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

AngularJS 数字

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>AngularJS</title>
        <script type="text/javascript" src="js/angular.min.js"></script>
    </head>
    <body ng-app="" ng-init="price=1.5;count=10">
        <div>
            总价(price*count):{{price * count}}
        </div>
    </body>
</html>

使用ng-bind实现相同效果:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>AngularJS</title>
        <script type="text/javascript" src="js/angular.min.js"></script>
    </head>

    <body ng-app="" ng-init="price=1.5;count=10">
        <div>
            总价(price*count):<span ng-bind="price * count"></span>
        </div>
    </body>

</html>

AngularJS 字符串

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>AngularJS</title>
        <script type="text/javascript" src="js/angular.min.js"></script>
    </head>

    <body ng-app="" ng-init="first='jiang';last='gujin'">
        <div>
            {{first + ' ' + last}}
        </div>
    </body>

</html>

AngularJS 对象

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>AngularJS</title>
        <script type="text/javascript" src="js/angular.min.js"></script>
    </head>

    <body ng-app="" ng-init="persion={first:'jiang',last:'gujin'}">
        <div>
            {{persion.first + ' ' + persion.last}}
        </div>
    </body>

</html>

AngularJS 数组

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>AngularJS</title>
        <script type="text/javascript" src="js/angular.min.js"></script>
    </head>

    <body ng-app="" ng-init="color=['red', 'blue', 'green']">
        <div>
            {{color[1]}}
        </div>
    </body>

</html>

AngularJS 表达式 与 JavaScript 表达式

  • 类似于 JavaScript 表达式,AngularJS 表达式可以包含字母,操作符,变量。
  • 与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。
  • 与 JavaScript 表达式不同,AngularJS 表达式不支持条件判断,循环及异常。
  • 与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。
目录
相关文章
|
8月前
|
缓存 自然语言处理 开发工具
Python中 __pycache__文件夹是什么?
Python中 __pycache__文件夹是什么?
130 5
|
缓存 Cloud Native 区块链
重塑链上数据索引,Chainbase 云原生 Subgraph 解析
Subgraph 是 The Graph 去中心化应用索引协议的具体实现, 能为各个智能合约创建索引引擎,提供 dataset 数据集供开发者快速查询使用。目前,Chainbase 正式上线并托管的核心 dataset subgraph 数量已经超过 100+。
496 0
重塑链上数据索引,Chainbase 云原生 Subgraph 解析
|
10月前
|
前端开发 测试技术 持续交付
【开发规范】Git Commit 规范
【1月更文挑战第26天】【开发规范】Git Commit 规范
|
10月前
|
JavaScript 前端开发 算法
【Vue原理解析】之虚拟DOM
Vue.js是一款流行的JavaScript框架,它采用了虚拟DOM(Virtual DOM)的概念来提高性能和开发效率。虚拟DOM是Vue.js的核心之一,它通过在内存中构建一个轻量级的DOM树来代替直接操作真实的DOM,从而减少了对真实DOM的操作次数,提高了页面渲染效率。本文将深入探讨Vue.js中虚拟DOM的作用、核心源码分析。
152 1
|
XML NoSQL 安全
Spring AOP在项目中的典型应用场景
Spring AOP在项目中的典型应用场景
【python】使用python将多个视频合并、延长视频的时间
今天做知识分享的时候,最后保存的视频时长是58分钟,那么如何改变视频的时长,将视频时长改为一个小时呢?请阅读下面的文章。
【python】使用python将多个视频合并、延长视频的时间
|
弹性计算 关系型数据库 MySQL
基于ECS搭建云上个人论坛
基于ECS搭建云上个人论坛
254 0
基于ECS搭建云上个人论坛
|
UED
什么是RC版本?
常见的 RC 版本,全称是 Release Candidate。其中 Release 是发行、发布的意思。Candidate 是候选人的意思,用在软件或者操作系统上就是候选版本。因此 Release Candidate 就是发行候选版本。
778 0
|
存储 云栖大会 NoSQL
北京云栖大会workshop:《数据接入:海量数据存储及实时访问》篇
本手册为北京云栖 Workshop《云数据·大计算:快速搭建互联网在线运营分析平台》的数据准备部分,介绍使用表格存储完成行为日志采集工作,并提供实时在线查询。
3585 0
北京云栖大会workshop:《数据接入:海量数据存储及实时访问》篇