AngularJS 表达式详解及实例代码


Posted in Javascript onSeptember 14, 2016

前面了解了AngularJS的基本用法,这里就跟着PDF一起学习下表达式的相关内容。

在AngularJS中的表达式,与js中并不完全相同。

首先它的表达式要放在{{}}才能使用,其次相对于javascript中的表达式概念,它有以下几点不同:

1 作用域不同

  在javascript中默认的作用于是window,但是在angularJs中就不同了。它使用$scope控制作用于。

2 允许未定义的值

  在angularjs中,如果使用了未定义的表达式,也不会出现错误,直接返回空值。

3 过滤器

  可以在表达式中使用 | 管道命令符,添加过滤器,与UNIX的命令行类似。 

4 $符号

用以区别angular的方法与用户自定义的方法。

下面看一段小代码:

<!doctype html>
<html ng-app>
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="ctl">
      name:<input ng-model="name" type="text">
      <button ng-click="reset()">reset</button>
      <br>
      {{name}}
      <br>
      hello ! {{test}}
      <br>
      filter : {{name | uppercase}}
    </div>
    <script type="text/javascript">
      function ctl($scope){
        var str = "init";
        $scope.name = str;

        $scope.reset = function(){
          $scope.name = str;
        }
      }
    </script>
  </body>
</html>

通过reset触发reset方法,重置name变量的内容;

在表达式中,引用了未定义的test,但是并没有报错,直接默认显示为空;—— {{test}}

最后使用过滤器,将表达式中name的值转化成大写。—— {{name | uppercase}}

运行结果:

 AngularJS 表达式详解及实例代码

 AngularJS 表达式详解及实例代码

     以上就是对AngularJS 表达式的资料整理,后续继续补充相关资料,谢谢大家的支持!

Javascript 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
jQuery实现的自动加载页面功能示例
Sep 04 Javascript
JS创建对象的写法示例
Nov 04 Javascript
js下拉菜单生成器dropMenu使用方法详解
Aug 01 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 Javascript
vue组件父与子通信详解(一)
Nov 07 Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 #Javascript
js注入 黑客之路必备!
Sep 14 #Javascript
AngularJS 模块化详解及实例代码
Sep 14 #Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 #Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 #Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 #Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 #Javascript
You might like
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
详解PHP防止直接访问.php 文件的实现方法
2017/07/28 PHP
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
vue实现登录功能
2020/12/31 Vue.js
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
python使用循环实现批量创建文件夹示例
2014/03/25 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
python之django母板页面的使用
2018/07/03 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
python实现排序算法解析
2018/09/08 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
Python实现EXCEL表格的排序功能示例
2019/06/25 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
生产部厂长职位说明书
2014/03/03 职场文书
秋天的雨教学反思
2014/04/27 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
绘画专业自荐信
2014/07/04 职场文书
医学专业大学生职业生涯规划书
2014/10/25 职场文书
2014年底个人工作总结
2015/03/10 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
Java后台生成图片的完整步骤
2021/08/04 Java/Android
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL