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