1. 程式人生 > >利用ng-model把前端獲取的值和後臺傳過來的值進行雙向繫結

利用ng-model把前端獲取的值和後臺傳過來的值進行雙向繫結

例如,使用者在搜尋框裡寫入了自己想要搜尋的條件,相應的前端要獲取到這個條件,然後傳給做出請求。
一個很簡單的應用,但是有一個坑要注意:在使用ng-model的時候一定要在相應的控制器中繫結$scope ($scope.Book_searchCtrl=$scope; // 把Book_searchCtrl換成自己的控制器)

首先,在相應的controller中:

$scope.Book_searchCtrl=$scope;  //繫結ng-model事件
//ajax根據自己的喜好來寫即可
$http({
        url:'book.json', //換成自己的url
        method:'post'
, data:{'bookname':$scope.Book_searchCtrl.bookName} //$scope.Book_searchCtrl.bookName即獲取使用者輸入的條件,並將其傳給後臺 }).success(function(data){ $scope.books = data.book; //獲取資料庫中的資料 }).error(function(data){ console.log("error"); });

其次,在html中定義ng-model
<input ng-model="Book_searchCtrl.bookName" type="search" placeholder="輸入書名/作者名">


( Book_searchCtrl換成自己的對應控制器的名字即可)
簡單言之(ng-model="Book_searchCtrl.bookName"(html) $scope.Book_searchCtrl=$scope;(controller) data:{'bookname':$scope.Book_searchCtrl.bookName}(ajax))這三句話便能實現雙向繫結