Question

我向rest api发送post请求，然后将我发送的数据与id一起返回，然后将其添加到表中，但表格没有更新。

$scope.addCategory = function(category){
        $http.post('http://localhost/myappi/API/index.php/Api/categories',category).
                success(function(data)
                {
                    console.log('Data returned: ', data);
                    $scope.categories.push(data);   //add it to the table ?

                })
                .error(function(err) {
                    console.log(err);
                })
    };

这是我的桌子。

<table class="table table-striped">
        <tr>
            <th>Name</th><th>Action</th>
        </tr>
        <tr ng-repeat="category in categories">
            <td>{{ category.name }}</td><td>
            <button class="btn btn-warning" ng-click="editCategory(category)">Edit</button>
            <button class="btn btn-danger" ng-click="deleteCategory(category.id)">Delete</button></td>

        </tr>
</table>

要在页面加载时填充表格，我有一个返回类别列表的init函数。我可以更改此方法，以便在用户篡改数据时触发，但在编辑字段时，从服务器获取所有数据似乎并不高效。此外，当我删除某个类别时，数据也会被正确删除。

//如何在页面加载时填充表格。

$scope.init = function() {
   $http.get('http://localhost/myappi/API/index.php/Api/categories/').
            success(function(data) {
                $scope.categories = data;
                console.log(data);
            })
            .error(function(err) {
                console.log(err);
            })
};

如何关闭此问题？我有$ scope.categories = [];在控制器的前面。

Answer 1

      angular.module("app", []);
        angular.module("app").controller("ctrl", function ($scope) {

            $scope.categories = [];

            $scope.addCategory = function () {

                var data = { name: "newData" };
                $scope.categories.push(data);

                //$http.post('http://localhost/myappi/API/index.php/Api/categories', category).
                //        success(function (data) {
                //            console.log('Data returned: ', data);
                //            $scope.categories.push(data);   //add it to the table ?

                //        })
                //        .error(function (err) {
                //            console.log(err);
                //        })
            };

        });

<!doctype html>
<html ng-app="app" ng-controller="ctrl">
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>

    <button ng-click="addCategory()">addCategory</button>
    <table class="table table-striped">
        <tr>
            <th>Name</th>
            <th>Action</th>
        </tr>
        <tr ng-repeat="category in categories">
            <td>{{ category.name }}</td>
            <td>
                <button class="btn btn-warning" ng-click="editCategory(category)">Edit</button>
                <button class="btn btn-danger" ng-click="deleteCategory(category.id)">Delete</button>
            </td>
        </tr>
    </table>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</body>
</html>

Answer 2

回答它以结束这个问题。我忘记了控制器前面的类别声明，导致表没有更新。我在init函数中移动了它，这解决了它。

$scope.categories=[];

添加项目时angularjs表不更新

2 个答案: