详解AngularJS中的表达式使用

 　　这篇文章主要介绍了详解AngularJS中的表达式使用,包括处理数字和字符串等各种对象的操作,需要的朋友可以参考下

　　表达式用于应用程序数据绑定到HTML。表达式都写在双括号就像{{表达式}}。表达式中的行为跟ng-bind指令方式相同。 AngularJS应用表达式是纯javascript表达式，并输出它们被使用的数据在那里。

　　使用数字

　　?

1

<p>Expense on Books : {{cost * quantity}} Rs</p>

　　使用字符串

　　?

1

<p>Hello {{student.firstname + " " + student.lastname}}!</p>

　　使用对象

　　?

1

<p>Roll No: {{student.rollno}}</p>

　　使用数组

　　?

1

<p>Marks(Math): {{marks[3]}}</p>

　　例子

　　下面的例子将展示上述所有表达式。

　　testAngularJS.html 文件代码如下：

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13

<html>
<title>AngularJS Expressions</title>
<body>
<h1>Sample Application</h1>
<div ng-app="" ng-init="quantity=1;cost=30; student={firstname:'Mahesh',lastname:'Parashar',rollno:101};marks=[80,90,75,73,60]">
<p>Hello {{student.firstname + " " + student.lastname}}!</p>
<p>Expense on Books : {{cost * quantity}} Rs</p>
<p>Roll No: {{student.rollno}}</p>
<p>Marks(Math): {{marks[3]}}</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

　　输出

　　在Web浏览器打开textAngularJS.html。看到结果如下：

时间： 2024-12-04 22:01:05

详解AngularJS中的表达式使用的相关文章

举例详解AngularJS中ngShow和ngHide的使用方法

这篇文章主要介绍了举例详解AngularJS中ngShow和ngHide的使用方法,AngularJS是一款非常热门的JavaScript框架,需要的朋友可以参考下 今天我们来看看怎样使用Angular的ngShow 和ngHide 指令来完成它们听起来应该完成的,显示和隐藏! 它们应该做的事 ngShow 和ngHide 允许我们显示或隐藏不同的元素.这有助于创建Angular应用时因为我们的单页程序会有许多的移动部件随着应用状态的改变而来来去去. 这些指令的最伟大的部分就是我们不必使用CSS

详解AngularJS中的依赖注入机制

  这篇文章主要介绍了详解AngularJS中的依赖注入机制,对JavaScript各组件的使用起到非常重要的作用,需要的朋友可以参考下 依赖注入是一个在组件中给出的替代了硬的组件内的编码它们的依赖关系的软件设计模式.这减轻一个组成部分,从定位的依赖,依赖配置.这有助于使组件可重用,维护和测试. AngularJS提供了一个至高无上的依赖注入机制.它提供了一个可注入彼此依赖下列核心组件. 值 工厂 服务 提供者 常值 值 值是简单的JavaScript对象,它是用来将值传递过程中的配置相位控制器

详解AngularJS中自定义指令的使用

  这篇文章主要介绍了详解AngularJS中自定义指令的使用,包括结合自定义HTML标签的使用,需要的朋友可以参考下 自定义指令中使用AngularJS扩展HTML的功能.自定义指令使用的"指令"的功能定义.自定义指令只是替换了它被激活的元素.引导过程中AngularJS应用程序找到了匹配的元素,并做好使用自定义指令compile()方法一次活动再处理使用基于指令的范围自定义指令link()方法的元素. AngularJS提供支持,以下列元素的类型来创建自定义指令. Element

详解AngularJS中的表格使用

  这篇文章主要介绍了详解AngularJS中的表格使用,作为热门的JavaScript框架,AngularJS中提供的表格功能十分强大,需要的朋友可以参考下 表格数据本质上通常是重复的.ng-repeat指令,可以用来方便地绘制表格.下面的示例说明使用ng-repeat指令来绘制表格. ? 1 2 3 4 5 6 7 8 9 10 <table> <tr> <th>Name</th> <th>Marks</th> </tr&g

详解AngularJS中的表单验证(推荐)_AngularJS

AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则式,很方便的完成验证,理论上所有的验证都可以用正则式完成 //javascript $scope.mobileRegx = "^1(3[0-9]|4[57]|5[0-35-9]|7[01678]|8[0-9])\\d{8}$"; $scope.emailRegx = "^[a-z]([a-z0-9]*[-_]?

详解AngularJS中$http缓存以及处理多个$http请求的方法_AngularJS

$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据.在AngularJS的实际项目中,经常需要处理多个$http请求,每个$http请求返回一个promise,我们可以把多个promise放到$q.all()方法接受的一个数组实参中去. 1.处理多个$http请求 angular.module('app',[]) .controller('AppCtrl', function AppCtrl(myService){ var app = this; myService.

详解AngularJS中的http拦截_AngularJS

http拦截,即$http服务允许我们与服务端交互,有时候我们希望在发出请求之前以及收到响应之后做些事情. $httpProvider包含了一个interceptors的数组. 我们这样创建一个interceptor. app.factory('myInterceptor', ['$log', function($log){ $log.debug(''); var myInterceptor = {}; return myInterceptor; }]) 接着注册interceptor.  ap

详解AngularJs中$sce与$sceDelegate上下文转义服务_AngularJS

一.严格的上下文转义服务 严格的上下文转义(SCE)是一种需要在一定的语境中导致AngularJS绑定值被标记为安全使用语境的模式.由用户通过ng-bind-html绑定任意HTML语句就是这方面的一个例子.我们称这些上下文转义为特权或者SCE. 二.$sce $sce 服务是AngularJs提供的一种严格上下文转义服务. 下面代码是简化了的ngBindHtml实现(当然,这不是完整版ngBindHtml源码): var ngBindHtmlDirective = ['$sce', funct

详解AngularJS中自定义过滤器_AngularJS

过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它们是:currency(货币).date(日期).filter(子串匹配).json(格式化json对象).limitTo(限制个数).lowercase(小写).uppercase(大写).number(数字).orderBy(排序).总共九种.除此之外还可以自定义过滤器,这个就强大了,可以满足任何