Gesuch mit AngularJS

Ich habe folgende html:Gesuch mit 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>

Es funktioniert gut, aber wenn ich „Kauf“ nennen, ist es nicht book Modell neu zu laden. Ich muss den Browser aktualisieren, um Änderungen zu sehen.

Frage: Wie kann ich mein Modell Autoupdate-Werte nach dem Klicken auf "Kaufen" machen?

Quelle

2016-08-04 Rudziankoŭ

Verwendung '$ http', die anstelle von' .ajax', die nicht ist $ Winkel bewusst ist. – Claies

Verwenden Sie auch 'ng-click' anstelle des bindenden jQuery-Stils, klicken Sie, wenn möglich, auf Event-Handler. – Claies

Wenn Sie Angular verwenden, beenden Sie die Verwendung von jQuery. Laden Sie nicht einmal die Bibliothek, also müssen Sie herausfinden, wie Sie es machen können. Vertrauen Sie mir: Sobald Sie lernen, ist es viel einfacher. Wenn Sie jQuery verwenden, wird das Modell nicht aktualisiert, und Sie erhalten endlos viele $ timeouts und $ scope. $ Apply() 's –

Das passiert, weil Sie jQuery anstelle von eckig verwenden.

Ihr Skript ändern zu

<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>

Ich bin eine Scope-Funktion namens Post zu definieren, die die $ HTTP-Aufruf an den Server macht.

Dann Anruf Post mit ng-Klick. Ändern Sie die Taste, um

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

EDIT

ich einige Änderungen vorgenommen haben, seit seiner einen anderen Anruf. Ich würde auch empfehlen, der bookBookForm ng-models hinzuzufügen, damit Sie jQuery entfernen können.

Quelle

2016-08-04 14:40:54 tpsilva

Die ursprüngliche Schaltfläche in diesem Code war kein" "Refresh" -Funktion war eine separate HTTP-Post-Methode. – Claies

Danke @Claies, ich habe meine Antwort bearbeitet. – tpsilva

Verwenden Sie die Anweisung ng-model, um eckig über ausgewählte Bücher zu informieren.

<input ng-model="book.isSelected"

dann die Daten auf folgende Weise senden:

$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; 
         }); 
      }

Quelle

2016-08-05 13:23:39

Gesuch mit AngularJS

Antwort

Verwandte Themen