利用ng-model把前端獲取的值和後臺傳過來的值進行雙向繫結
阿新 • • 發佈:2019-02-12
例如,使用者在搜尋框裡寫入了自己想要搜尋的條件,相應的前端要獲取到這個條件,然後傳給做出請求。
一個很簡單的應用,但是有一個坑要注意:在使用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))這三句話便能實現雙向繫結