與AngularJS

發佈採購信息我有以下html：與AngularJS

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>SPA book_store</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

    <script> 
     var app = angular.module('myApp', []); 
     app.controller('myCtrl', function ($scope, $http) { 
      $http.get("http://localhost:8080/book_store/rest/books_json/get") 
        .then(function (response) { 
         $scope.books = response.data; 
        }); 
      $(document).ready(function() { 
       $('#call').click(function() { 
        $.ajax({ 
         type: "post", 
         url: "http://localhost:8080/book_store/rest/books_json", 
         data: $('#buyBookForm').serialize(), 
         success: function (response) { 
          $scope.books = response.data; 
         } 
        }); 
       }); 
      }); 
     }); 

    </script> 
</head> 
<body> 


<div class="container" ng-app="myApp" ng-controller="myCtrl"> 
    <h1>Book Store</h1> 
    <p>Choice any book you like:</p> 

    <form id="buyBookForm" method="post"> 
     <table id="table" class="table"> 
      <thead> 
      <tr> 
       <th>Book Name</th> 
       <th>Author</th> 
       <th>Genre</th> 
       <th>Price</th> 
       <th>Sold</th> 
       <th>Bought By</th> 
      </tr> 
      </thead> 
      <tbody> 

      <input id="filter_input" type="text" ng-model="nameText"/> 
      <ul> 
       <tr ng-repeat="book in books | filter:nameText | orderBy:'name'"> 
         <td> 
          <input type="checkbox" name="book{{book.name}}" 
            value="{{book.book_id}}"> <label>{{book.name}}</label> 
         </td> 
         <td>{{book.author.name}}</td> 
         <td>{{book.genre}}</td> 
         <td>{{book.price}}</td> 
         <td>{{book.bought}}</td> 
         <td>{{book.buyCount}}</td> 
       </tr> 
      </ul> 
      </tbody> 
     </table> 

    </form> 
    <input type="submit" name="submit" value="Purchase" id="call"> 
</div> 

</body> 
</html>

它工作正常，但是當我打電話「購買」不重裝book模型。我必須調用瀏覽器刷新來查看更改。

問題： 如何在點擊「購買」後創建我的模型自動更新值？

來源

2016-08-04 Rudziankoŭ

使用'$ http'這是角度認識代替'$ .ajax'這是不是。 – Claies

也可以使用'ng-click'來代替綁定jQuery樣式的點擊事件處理器。 – Claies

如果您使用Angular，請停止使用jQuery。甚至不要加載庫，所以你不得不弄清楚如何做「角度的方式」。相信我：一旦你學會了，它就容易多了。當你使用jQuery時，它不會更新模型，並且最終會有'$ timeout's和'$ scope的無窮供應。$ apply（）' –

發生這種情況是因爲您使用jQuery而不是角度。

你的腳本改爲

<script> 
var app = angular.module('myApp', []); 
app.controller('myCtrl', function ($scope, $http) { 


    $http.get("http://localhost:8080/book_store/rest/books_json/get") 
     .then(function (response) { 
      $scope.books = response.data; 
    }); 

    $scope.post = function(){ 
     $http.post("http://localhost:8080/book_store/rest/books_json", $('#buyBookForm').serialize()) 
     .then(function (response) { 
      $scope.books = response.data; 
     }); 
    } 


}); 
</script>

我定義所謂的後一個範圍的功能，才使得$ HTTP調用到你的服務器。

然後，用ng-click調用帖子。更改按鈕

<input type="submit" ng-click="post()" name="submit" value="Purchase" id="call">

編輯

我已經做了一些改變，因爲它是一個不同的呼叫。我還建議在buyBookForm中添加ng模型，以便刪除jQuery。

來源

2016-08-04 14:40:54 tpsilva

此代碼中的原始按鈕不是「刷新「功能，它是一個單獨的HTTP Post方法。 – Claies

謝謝@Claies，我編輯了我的答案。 – tpsilva

使用ng-model指令使角度知道選定的書籍。

<input ng-model="book.isSelected"

然後通過以下方式發送數據：

$scope.post = function(){ 
       var requestBody = $scope.books.filter(function(book) { 
        return book.isSelected; 
       }); 
       requestBody.forEach(function (book) { 
        book.isSelected = undefined; 
       }); 
       $http.post("http://localhost:8080/book_store/rest/books_json", requestBody) 
         .then(function (response) { 
          $scope.books = response.data; 
         }); 
      }

來源

2016-08-05 13:23:39

回答

相關問題