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学习笔记(十五) js间歇调用和超时调用
Jun 20 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
jQuery图片轮播实现并封装(一)
Dec 03 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 Javascript
如何解决webpack-dev-server代理常切换问题
Jan 09 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 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
JAVA/JSP学习系列之七
2006/10/09 PHP
PHP编程中八种常见的文件操作方式
2006/11/19 PHP
php google或baidu分页代码
2009/11/26 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
20个2014年最优秀的PHP框架回顾
2014/10/22 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
php给数组赋值的实例方法
2019/09/26 PHP
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
2014/04/11 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
netbeans7安装python插件的方法图解
2013/12/24 Python
python使用循环实现批量创建文件夹示例
2014/03/25 Python
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
Python中的asyncio代码详解
2019/06/10 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
求职简历中自我评价
2014/01/28 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
Python Pandas 删除列操作
2022/03/16 Python