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里的方法。