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 相关文章推荐
列表内容的选择
Jun 30 Javascript
防止动态加载JavaScript引起的内存泄漏问题
Oct 08 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
js 第二代身份证号码的验证机制代码
May 12 Javascript
js中arguments的用法(实例讲解)
Nov 30 Javascript
使用jquery 简单实现下拉菜单
Jan 14 Javascript
js实现缓冲运动效果的方法
Apr 10 Javascript
Jquery操作Ajax方法小结
Nov 29 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 Javascript
AngularJS过滤器详解及示例代码
Aug 16 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
JavaScript实现随机点名器
Mar 25 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中JSON的使用方法
2015/04/30 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
PHP预定义接口――Iterator用法示例
2020/06/05 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
js时间日期和毫秒的相互转换
2013/02/22 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
JS集成fckeditor及判断内容是否为空的方法
2016/05/27 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
thinkphp5 路由分发原理
2021/03/18 PHP
html5实现滑块功能之type=&quot;range&quot;属性
2020/02/18 HTML / CSS
作为网站管理者应当如何防范XSS
2014/08/16 面试题
村捐赠仪式答谢词
2014/01/21 职场文书
出纳员岗位职责
2014/03/13 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
小型婚礼主持词
2015/06/30 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
党员电教片《信仰》心得体会
2016/01/15 职场文书
python中Matplotlib绘制直线的实例代码
2021/07/04 Python