party_bid第二三張卡總結

      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經常用到的,以後繼續積累,總結。
發佈了13 篇原創文章 · 獲贊 2 · 訪問量 1348
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章