详解AngularJS中的表达式使用

 更新时间:2015年06月16日 12:00:12   投稿:goldensun  
这篇文章主要介绍了详解AngularJS中的表达式使用,包括处理数字和字符串等各种对象的操作,需要的朋友可以参考下

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

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

使用字符串

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

使用对象

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

使用数组

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

例子

下面的例子将展示上述所有表达式。
testAngularJS.html 文件代码如下:

<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。看到结果如下:

2015616115757530.png (587×339)

相关文章

  • Angular4实现动态添加删除表单输入框功能

    Angular4实现动态添加删除表单输入框功能

    这篇文章主要介绍了Angular4实现动态添加删除表单输入框功能,需要的朋友可以参考下
    2017-08-08
  • Angular4实现图片上传预览路径不安全的问题解决

    Angular4实现图片上传预览路径不安全的问题解决

    这篇文章主要给大家介绍了关于Angular4实现图片上传预览路径不安全问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧。
    2017-12-12
  • 仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件

    仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件

    这篇文章主要为大家详细介绍了仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件的相关资料,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • Angular实现的简单查询天气预报功能示例

    Angular实现的简单查询天气预报功能示例

    这篇文章主要介绍了Angular实现的简单查询天气预报功能,涉及AngularJS针对第三方API接口交互的相关操作技巧,需要的朋友可以参考下
    2017-12-12
  • Angular 4.x 路由快速入门学习

    Angular 4.x 路由快速入门学习

    这篇文章主要介绍了Angular 4.x 路由快速入门学习,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • Angular的FormArray和模态框结合使用实例详解

    Angular的FormArray和模态框结合使用实例详解

    这篇文章主要为大家介绍了Angular的FormArray和模态框结合使用实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • Angular 服务器端渲染应用常见的内存泄漏问题小结

    Angular 服务器端渲染应用常见的内存泄漏问题小结

    这篇文章主要介绍了Angular 服务器端渲染应用一个常见的内存泄漏问题,主要包括屏幕闪烁问题,出现闪烁的原因,在于 Angular 不知道如何重用它在服务器上成功渲染的内容,本文给大家介绍的非常详细,需要的朋友一起学习下吧
    2022-06-06
  • 一篇文章快速了解Angular和Ionic生命周期和钩子函数

    一篇文章快速了解Angular和Ionic生命周期和钩子函数

    Ionic以AngularJS和ApacheCordova为基础,使用Node.js进行模块管理,使用Html5、Css(SASS)和Javascript技术进行APP开发,这篇文章主要给大家介绍了如何通过一篇文章快速了解Angular和Ionic生命周期和钩子函数的相关资料,需要的朋友可以参考下
    2021-07-07
  • angularjs 动态从后台获取下拉框的值方法

    angularjs 动态从后台获取下拉框的值方法

    今天小编就为大家分享一篇angularjs 动态从后台获取下拉框的值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • angular2 NgModel模块的具体使用方法

    angular2 NgModel模块的具体使用方法

    这篇文章主要介绍了angular2 NgModel模块的具体使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论