AngularJS控制器和AngularJS过滤器的学习(3)
前面简单的学习了AngularJS的表达式和指令,就可以说大概对AngularJS有了一定的了解吧,嘿嘿,下面就来总结学习一下AngularJS的控制器和过滤器哦。
说起来AngularJS控制器,其实就是常规的JavaScript对象。来控制AngularJS应用程序的数据。
一、AngularJS的控制器
<1>、AngularJS 控制器
在浏览器中浏览的结果是:
AngularJS应用程序被控制器控制,ng-controller指令定义了应用程序控制器,控制器是JavaScript对象,由标准的JavaScript对象的构造函数创建。
AngularJS应用程序由ng-app定义,应用程序在<div>内运行,ng-controller="myC"熟悉是一个AngularJS指令。用于定义一个控制器,myC函数是一个JavaScript函数。使用$scope对象来调用控制器。而在AngularJS中,$scope是一个应用象(属于应用变量和函数);控制器的$scope(相当于作用域、控制范围)用来保存AngularJS中的Model(模型)的对象,控制器在作用域中创建了两个属性 (firstName和lastName),ng-model指令绑定输入域到控制器的属性(firstName和lastName)。
<2>、控制器方法
在浏览器中浏览的结果是:
在<1>的实例中演示了一个带有lastName和firstName这两个属性的控制器对象。控制器也可以有方法(变量和函数),我们可以对比一下上面的两个实例。
上面的html和script是在一个页面中呈现的,如果我们引用一个外部的js文件那么只需要这样简单的引用一下即可,如下所示:
myC.js文件如下:
这样实现起来也是很方便的。
二、AngularJS 过滤器
过滤器可以使用一个管道字符(|)添加到表达式和指令中。
<1>、根据上面的指令,我们就把上个实例名字的拼音设置为名字,然后针对fullName的的最终值进行一个大小写处理。
在浏览器中浏览的结果是:
在浏览器中浏览的结果是:
<1>、根据上面的指令,currency过滤器将数字格式化为货币格式:
在浏览器中浏览的结果是:
<3>、向指令添加过滤器
在浏览器中浏览的结果是:
<4>、在输入的文本框中有选择性的过滤
在浏览器中浏览的结果是:
以上几个实例就是在展示几个过滤器的使用,最后一个是在综合的使用这几个方法。好啦,今天我就学习到这里啦,嘿嘿,明天继续哦。
AngularJS控制器和AngularJS过滤器的学习(3)相关推荐
- AngularJS控制器和过滤器学习(三)
AngularJS控制器 AngularJS 控制器 控制 AngularJS 应用程序的数据. AngularJS 控制器是常规的JavaScript对象 <h2>AngularJS 控 ...
- AngularJS 控制器
1. AngularJS 控制器: AngularJS 控制器控制AngularJS 应用程序的数据. ng-controller指令定义了应用程序控制器. AngularJS 控制器是常规的Java ...
- 观《phonegap第三季 angularjs+ionic视频教程 实时发布》学习笔记(一)
一. phonegap 性能优化 以及 phonegap + Angularjs +ionic 1.安装包括:nodejs-cordova-ionic,sdk,phonegap等等: 2.怎样吧导航设 ...
- AngularJS控制器中的#39;this#39;与$ scope
本文翻译自:'this' vs $scope in AngularJS controllers In the "Create Components" section of Angu ...
- 【AngularJS】—— 9 自定义过滤器
AngularJS另一个特点就是提供了过滤器,可以通过操作UNIX下管道的方式,操作数据结果. 通过使用管道,可以便于双向的数据绑定中视图的展现. 过滤器在处理过程中,将数据变成新的格式,而且可以使用 ...
- ionic+angularJS+iOS混合开发app的学习资料介绍和基本步骤(干货)
ionic+angularJS+iOS 先安装nodejs.npm.angularJS和ionic 其中nodeJS和npm安装可以到官网下载nodeJS,然后双击安装就好很简单(网址: http:/ ...
- 在AngularJS控制器之间共享数据
本文翻译自:Share data between AngularJS controllers I'm trying to share data across controllers. 我正在尝试跨控制 ...
- AngularJS 控制器中处理DOM事件
# AngularJS 控制器中处理DOM事件 标签(空格分隔): AngularJS - AngularJS应用中的DOM事件可以在控制器中完成.AJ框架为我们提供了事件绑定指令,只需要在原生的av ...
- angularjs html压缩,Angularjs 依赖压缩及自定义过滤器写法
具体代码如下所示: {{name | rHello}} {{name | rHello:3:5}} // 三个参数分别是'input .n1.n2' {{name | rJs}} var app=an ...
最新文章
- sklearn库安装_没有依赖库也能跑机器学习模型!推荐一个强大工具m2cgen
- 领克汽车是用鸿蒙系统吗,领克全新旗舰SUV将在上海车展首发亮相
- Linux停用“黑名单”,因为这是敏感词,涉嫌种族歧视
- 大数处理之一(加法和乘法)
- 【控制】《多智能体机器人系统信息融合与协调》范波老师-第6章-基于分布式强化学习的多 Agent 协调方法
- 【转】一文读懂数据分析平台的架构与设计
- python加密解密库openssl_OpenSSL和Python实现RSA Key公钥加密私钥解密
- IdentityServer4密码模式
- 利用JS脚本快速删除百度网盘同一目录下的不需要文件(可以参考这个方法删除重复文件)
- xadmin删除数据后出现ValueError报错
- 102 二叉树层序遍历Binary Tree Level Order Traversal @ Python
- java把字符串转为日期_Java程序将字符串转换为日期
- 百度 Echarts 地图-模拟迁徙,实现自动切换地图
- Red Bend与阿朗推LTE移动设备管理 使4G设备兼容OMA DM
- Unity功能点---动画控制CrossFade方法的使用和简单说明
- 看了这篇文章,终于知道怎么区分DV、OV、EV证书了
- Go语言实现获取有道网页结果
- C++程序设计语言学习笔记:名字空间
- 吴裕雄--天生自然 诗经:寻隐者不遇
- equal与==的区别