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 相关文章推荐
js滚动条多种样式,推荐
Feb 05 Javascript
js 判断一个元素是否在页面中存在
Dec 27 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 Javascript
js检验密码强度(低中高)附图
Jun 05 Javascript
jquery实现html页面 div 假分页有原理有代码
Sep 06 Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 Javascript
js实现select二级联动下拉菜单
Apr 17 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 Javascript
antd多选下拉框一行展示的实现方式
Oct 31 Javascript
Element el-button 按钮组件的使用详解
Feb 01 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 Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
python制作朋友圈九宫格图片
2019/11/03 Python
TensorFlow索引与切片的实现方法
2019/11/20 Python
python实现翻译word表格小程序
2020/02/27 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
护士的岗位职责
2013/12/04 职场文书
采购部经理岗位职责
2014/02/10 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
会计实训总结范文
2015/08/03 职场文书
初中班主任心得体会
2016/01/07 职场文书
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS