AngularJS之学写partyBid第三张卡片 -

d0ln

浏览: 2796 次
来自: 成都

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2014-09 ( 5)
更多存档...

AngularJS之学写partyBid第三张卡片

博客分类：

AngularJS

１．模拟发短信

JavaScript代码  
notify_message_received({"messages": [  
 {"create_date": "Tue Jan 15 15:28:44 格林尼治标准时间+0800 2013", "message": "bm1", "phone": "181717833"}  
 ]})  

２．处理短信：
①去空格：

JavaScript代码 
var message = json_message.messages[0].message.replace(/\s/g, "");  

②判断是否以bm开头：

JavaScript代码  
message.search(/bm|ｂｍ/i) == 0  

③在sms.js页面调用sign_up_page相对应的Controller里的函数，只要在页面上给一个ID,然后在sms.js上写以下内容：

Java代码  
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()  
   })  
}  

３．在正则表达式中＂或者＂用＂|＂表示
　　　　　　　　　＂所有＂用＂g＂表示
　　　　　　　　　＂不区分大小写＂用＂i＂表示
４．正在报名的活动对应的活动列表的颜色为黄色，可以巧妙的用class的命名来解决

Java代码  
class="{{activity.status}}＂  

Java代码  
.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传值，将数组的值显示到页面。
显示：ng-show
       ng-show = "true"时显示标签内容，ng-show = "false"时不显示标签内容。
可点与不可点：ng-disabled
       ng-disabled = "true"时不可点，反之可点。
点击触发事件：ng-click

<button ng-click = "go_to_home()">主页</button>
 
$scope.go_to_home = function(){
    $location.path('home');
}
      当点击button按钮，就会触发事件，调用go_to_home()这个写在js里的方法。
      以上四个是现在做party_bid经常用到的，以后继续积累，总结。
 

分享到：

AngularJS之学写partyBid第四张卡片 | AngularJS之学写partyBid第二张卡片

2014-09-11 17:25
浏览 626
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

AngularJS之学写partyBid第三张卡片

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

AngularJS之学写partyBid第三张卡片

评论

发表评论

相关推荐

partyBid之三种数据结构

AngularJS之学写partyBid第四张卡片

AngularJS之学写partyBid第二张卡片

AngularJS之学写partyBid第一张卡片

AngularJS之学写partyBid

最近访客更多访客>>