Question

我关注html：

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

它工作正常，但是当我打电话给＃34;购买＆＃34;它没有重新加载book模型。我必须调用浏览器刷新才能看到更改。

问题： 如何在点击＆＃34;购买＆＃34;？

后，如何使我的模型自动更新值

Answer 1

这是因为您使用的是jQuery而不是angular。

将脚本更改为

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

我定义了一个名为post的范围函数，它会对您的服务器进行$ http调用。

然后，使用ng-click调用post。将按钮更改为

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

编辑

我做了一些改变，因为它有一个不同的电话。我还建议将ng-models添加到buyBookForm中，这样你就可以删除jQuery。

Answer 2

使用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;
                        });
            }

使用AngularJS发布请求

2 个答案: