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 编程引入命名空间的方法与代码
Aug 13 Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
js实现彩色条纹滚动条效果
Mar 15 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
浅谈Webpack打包优化技巧
Jun 12 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 Javascript
js中forEach,for in,for of循环的用法示例小结
Mar 14 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如何透过ODBC来存取数据库
2006/10/09 PHP
PHP使用header()输出图片缓存实例
2014/12/09 PHP
试用php中oci8扩展
2015/06/18 PHP
javascript生成/解析dom的CDATA类型的字段的代码
2007/04/22 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
2015/02/18 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
Python实现购物车功能的方法分析
2017/11/10 Python
简单实现python画圆功能
2018/01/25 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
python读写配置文件操作示例
2019/07/03 Python
react+django清除浏览器缓存的几种方法小结
2019/07/17 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
Python tornado上传文件的功能
2020/03/26 Python
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python