图书

Question

我害羞地想交朋友Angular和后端数据库。

简单的操作。获取角度模型的数据库。保存数据库中的条目，并删除条目。

我堆叠在DELETE操作上。当我删除从数据库加载的条目时，它没问题。但是当我通过push方法删除新创建的行时，我收到了错误。

这是因为在模型中缺少id。在插入数据库后，我尝试从数据库重复刷新Angular模型。（$ http.get）但在这种情况下，视图没有刷新（只有闪烁）。我看到新条目只刷新页面F5。

帮助！

图书

   <div ng-app="App" ng-controller="MyCtrl">


    <table class="">
        <th>
            <tr style="font-size: 20px">
                <td>ID</td>
                <td>Name</td>
                <td>Price</td>
                <td>Action</td>
            </tr>
        </th>

        <tr ng-repeat="book in books">
            <td style="width: 200px">{{book.id}}</td>
            <td style="width: 200px">{{book.name}}</td>
            <td style="width: 50px">{{book.price |currency}}</td>
            <td>
                <button ng-click="removeItem($index)">Удалить</button>
            </td>
        </tr>

        <tr>
            <td></td>
            <td><input type="text" ng-model="name"/></td>
            <td><input type="number" ng-model="price"/></td>
            <td>
                <button ng-click="addBook()">Добавить книгу</button>
            </td>
        </tr>
    </table>

</div>

<script>

    var App = angular.module('App', []);

    App.controller('MyCtrl', function ($scope, $http) {
        $http.get('http://ang:8888/index.php?r=site/api2').success(function (data) {
            $scope.books = data;
        });


        $scope.removeItem = function (index) {
            var id = $scope.books[index].id;
            $scope.books.splice(index, 1);
            $http.post('http://ang:8888/index.php?r=site/del2', {id: id});

        }




        $scope.addBook = function () {
            var newBook = ({name: $scope.name, price: $scope.price});
            $scope.books.push(newBook);

            $http.post("http://ang:8888/index.php?r=site/post2", {name: $scope.name,      price: $scope.price})
                .success(function (data, status, headers, config) {
                    console.log("inserted Successfully");
                });
        $http.get('http://ang:8888/index.php?r=site/api2').success(function (data) {
            $scope.books = data;
        });

        }
    })

Answer 1

问题是由于所有远程调用的异步性质。你调用帖子并按顺序获取方法，却没有意识到两者本质上都是同步的。所以你的帖子后面会立即获得。

将帖子的代码更改为

  $http.post("http://ang:8888/index.php?r=site/post2", {
          name: $scope.name,
          price: $scope.price
      }).success(function (data, status, headers, config) {
          console.log("inserted Successfully");
          $http.get('http://ang:8888/index.php?r=site/api2').success(function (data) {
              $scope.books = data;
          });
      });

在上面的代码中，只有在发布完成后才能获得。

插入数据库后如何更新模型？并刷新视图

图书

1 个答案: