1.模拟发短信
- notify_message_received({"messages": [
- {"create_date": "Tue Jan 15 15:28:44 格林尼治标准时间+0800 2013", "message": "bm1", "phone": "181717833"}
- ]})
2.处理短信:
①去空格:
- var message = json_message.messages[0].message.replace(/\s/g, "");
②判断是否以bm开头:
- message.search(/bm|bm/i) == 0
③在sms.js页面调用sign_up_page相对应的Controller里的函数,只要在页面上给一个ID,然后在sms.js上写以下内容:
- var sign_up_view_element = document.getElementById("sign_up_page")
- if(sign_up_view_element) {
- var scope = angular.element(sign_up_view_element).scope()
- scope.$apply(function() {
- scope.apply_num()
- })
- }
3.在正则表达式中"或者"用"|"表示
"所有"用"g"表示
"不区分大小写"用"i"表示
4.正在报名的活动对应的活动列表的颜色为黄色,可以巧妙的用class的命名来解决
- class="{{activity.status}}"
- .start{
- background: yellow !important;
- }//一定要注意!important,可能原来的css中就有颜色的控制,这时候如不加此句,则颜色可能会显示不出来
party_bid 的第二张卡和第三张卡都涉及到接受信息和回复信息,并对收到的信息进行处理。这里我把两张卡合并起来一起总结。
1.首先是对接收到的信息进行处理,信息分为报名和竞价,报名是以“bm”开头的信息,竞价是“jj”开头。我们要处理的主要是它们后面的信息。这里需要用到正则表达式:
var message = json_message.messages[0].message.replace(/\s/g, ""); message.search(/jj/i) message.substr(2)
讲讲这三个语句的意思。
replace()和search()是String支持4种使用正则表达式方法的两种,replace()方法用以执行检索与替换操作,search()用来执行检索。
例如:text.replace(/javascript/gi,"JavaScript"); //将text中所有不区分大小写的javascipt替换为大小写正确的JavaScript。
在正则表达式中”\s“是任何Unicode空白符的意思(这里注意一下大小写,”\S“是任何非Unicode空白符的字符),“/g”则是全局的意思,所以json_message.messages[0].message.replace(/\s/g, "")是将message中的所有空格都替换成空字符串,也就是去除空格的意思,为什么要去除空格呢?这都是为下一句判断做准备。
先来看一下下面语句:
"javascript".search(/script/i) //这个语句的返回值为4 "bm".search(/bm/i) //这个语句的返回值为0 "ddBmdd".search(/bm/i) //这个语句的返回值为2 "ddbdm".search(/bm/i) //这个语句的返回值为-1
看到这里应该懂了,search()可以返回找到字符串前面字符的个数,如果找不到则会返回-1,经过replace()后,获取的信息所有的空格都去除了,所以返回值肯定是0,用这个语句进行判断是否是报名短信。
最后是substr(),这里的message.substr(2)是去除message的前两位,也就是为了处理短信,去除bm获取后面的人名。
2.在讲信息显示前,这里先说一下关于$scope。
$scope是一个把html连接到javaScrip上的对象。在$scope对象里,我们可以存储数据,也可以存储在html上运行的函数。这里也可以看一下$scope里存储的东西,
console.log($scope); //将$scope里的内容打印出来
我们可以利用$scope实现两者之间的信息传递。
我们可以在js中写入$scope.name = "moneyinto"
然后在对应的html中任何地方可以访问name,通过表达式{{}},(这就是数据的绑定)
写成这样{{name}}
这样我们的页面上就会显示 moneyinto
3.接着是对处理完的信息进行显示,和计数,通常我们接受到信息处理后,页面上显示的信息没有增加,其实已经有了刚处理完的信息,可以通过console.log();打印出来看看。这时手动刷新一下页面信息便可以显示出来,但是总不能让用户一直手动刷新吧,这里我们需要用到$apply()将代码包起来。
先看一段代码:
<div ng:app ng-controller="Ctrl">{{message}}</div>
functionCtrl($scope) { $scope.message ="hello world!"; setTimeout(function () { $scope.message ="moneyinto"; }, 3000); }
执行上面的代码后,页面会显示“hello world!”,
然后3秒之后,message的值发生变化,按理说这时页面上应该显示“moneyinto”,
执行console.log(message);也会发现message的值已经变化了,
但是实际情况是页面上还是显示的“hello world!”。
angular JS没有觉察到数据的更新。
这里就需要用$apply将上面的代码包起来:
functionCtrl($scope) { $scope.message ="hello world!"; setTimeout(function () { $scope.$apply(function () { $scope.message ="moneyinto"; }); }, 3000); }
这样页面上会显示“hello world!”,三秒之后会显示“moneyinto”,数据的更新被angular JS觉察到了。
接下来看一下报名信息存储后的一段代码:
var signUp = document.getElementById("signUp"); //获取报名页面的id if (signUp) { var scope = angular.element(signUp).scope(); //通过id找到对应的页面获取$scope scope.$apply(function () { //使用$apply()将报名页面的refresh方法包起来 scope.refresh(); }); }
在报名页面对应的js文件中写好refresh()的方法,这样每当我们在接受到信息处理完存储到本地的话就会调用以下refresh()执行一遍,这样页面的数据就会自动及时更新了。
4.ng常用小结
重复:ng-repeat
<div> <ul> <li ng-repeat = "activity in activities"> <h2>{{activity.name}}</h2> </li> </ul> </div>
var activities = [{"name":1},{"name":2},{"name":3}]; $scope.activities = activities;通常我们需要将一组重复的数据逐条显示在页面上时,会用到ng-repeat,如上进行数据绑定,然后通过$scope传值,将数组的值显示到页面。
<button ng-click = "go_to_home()">主页</button>
$scope.go_to_home = function(){ $location.path('home'); }当点击button按钮,就会触发事件,调用go_to_home()这个写在js里的方法。
相关推荐
angularJS_学习资料
《AngularJS即学即用》【书本源码下载】 书本的随书源码正式版下载
AngularJS学习手册 源代码
本分卷由2345好压(Haozip)生成,请使用2345好压来解压。 ...分卷文件共有以下2个: AngularJS即学即用 (美)夏德瑞 格林 译者 朱磊.haozip01.zip AngularJS即学即用 (美)夏德瑞 格林 译者 朱磊.haozip02.zip
AngularJS 学习资料 Android学习
AngularJS是google在维护,其在国外已经十分火热,可是国内的使用情况却有不小的差距,参考文献/网络文章也...这里便将我学习AngularJS写成文档,一方面作为自己学习路程上的记录,另一方面也给有兴趣的同学一些参考。
angularjs的学习资料,分享给你们。
强大有用的学习资源,只是为初学者的量身定做的ppt,书名为《AngularJS的权威学习指南》。可以让初学者快速的掌握技能。
学习AngularJS很好的帮手,本文件是CHM文件,查看方便,使用方便!
AngularJs入门学习实例,博客文章地址:http://blog.csdn.net/mqy1023/article/details/51540503
AngularJS学习
AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库。它可通过 [removed] 标签添加到HTML 页面。 AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。 AngularJS 是以一个 JavaScript...
第三方JavaScript库 BootstrapCSS 2.2 构建系统 构建系统准则 自动化所有事情 尽早报错,清晰报错 不同的工作流,不同的命令 构建脚本同样是代码 工具 Gruntjs 测试库与工具 ...
MovieCat 用angularjs写的一个前端网页
angularjs 即学即用 英文版 PDF,书中的例子是基于1.2.x的angularjs,这个大家一定要明白,不要使用1.6.x的版本去做实验。 另外,书中的很多例子也不在有效了,大家可以参考看一下,但讲原理还是不错的一本书。
angularjs学习需要导入的angular.js
AngularJS 高级程序设计编程学习代码
第3部分为第18章到第25章,解释了AngularJS中的两个重要组件模块和服务,还讨论了简化页面应用程序开发、Ajax和RESTful API、单元测试的支持等相对高级的话题。每一主题都清晰简明地涵盖且真正有效地对你所学习的...
Angularjs基础入门PPT,非常适合初学者及有PPT制作需求的同学。