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 遍历对象中的子对象
Jul 03 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
getElementByIdx_x js自定义getElementById函数
Jan 24 Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 Javascript
jQuery无缝轮播图代码
Dec 22 Javascript
jQuery实现frame之间互通的方法
Jun 26 jQuery
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
24行JavaScript代码实现Redux的方法实例
Nov 17 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
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
jQuery中scrollLeft()方法用法实例
2015/01/16 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
vue中appear的用法
2017/08/17 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
详解详解Python中writelines()方法的使用
2015/05/25 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
Pycharm小白级简单使用教程
2020/01/08 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
运动会解说词200字
2014/02/06 职场文书
开门红主持词
2014/04/02 职场文书
文艺演出策划方案
2014/06/07 职场文书
民族学专业求职信
2014/07/28 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
Vue中Object.assign清空数据报错的解决方案
2022/03/03 Vue.js