利用ng-model把前端获取的值和后台传过来的值进行双向绑定

最新推荐文章于 2021-02-01 03:44:00 发布

原创

最新推荐文章于 2021-02-01 03:44:00 发布 · 4.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ng-model #angularjs #双向数据绑定

本文介绍了如何使用AngularJS中的ng-model实现前端与后台数据的双向绑定。在用户输入搜索条件时，ng-model能实时捕获并传递给后台。然而，使用ng-model时需注意需在控制器中绑定$scope。示例代码展示了从HTML到Controller再到AJAX请求的数据流动过程。

例如，用户在搜索框里写入了自己想要搜索的条件，相应的前端要获取到这个条件，然后传给做出请求。
一个很简单的应用，但是有一个坑要注意：在使用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