码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS控制器和AngularJS过滤器的学习(3)

时间:2015-11-10 15:42:11      阅读:273      评论:0      收藏:0      [点我收藏+]

标签:

                      前面简单的学习了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)

标签:

原文地址:http://www.cnblogs.com/dyxd/p/4950350.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!