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 相关文章推荐
一些实用的jQuery代码片段收集
Jul 12 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
JavaScript弹窗基础篇
Apr 27 Javascript
jQuery下拉菜单的实现代码
Nov 03 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 Javascript
浅谈Angular 中何时取消订阅
Nov 22 Javascript
JS中注入eval, Function等系统函数截获动态代码
Apr 03 Javascript
vue实现分页栏效果
Jun 28 Javascript
ant design vue的form表单取值方法
Jun 01 Vue.js
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实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
一个JS的日期格式化算法示例
2013/07/31 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
几种响应式文字详解
2017/05/19 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
如何用Lucene索引数据库
2016/02/23 面试题
大学生个人总结的自我评价
2013/10/05 职场文书
理财投资建议书
2014/03/12 职场文书
《海底世界》教学反思
2014/04/16 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
国企干部对照检查材料
2014/08/22 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书
在项目中使用redis做缓存的一些思路
2021/09/14 Redis
MySQL sql模式设置引起的问题
2022/05/15 MySQL