AngularJS从http请求更新ng-repeat中的数据

Question

我搜索了解决方案，但没有找到答案。我的问题是什么，在我的类别视图中，我有 init 函数，它发出 http 请求并从数据库中获取所有类别。我使用这些记录并制作 ng-repeat。但是，当我打开带有表单的模态以创建新类别时，当模态关闭并查看新类别时，我无法更新该 ng-repeat 视图。我以这种方式组织我的控制器、服务和视图：

查看

<div class="row main-body no-padding" ng-init="adminCtr.initCategory()">

    <div class="col-lg-4 margin-bottom-20" ng-repeat="category in adminCtr.allCategories">
        <div class="header-panel">
            <span class="category-headline">{{category.name}}</span>
        </div>
        <div class="main-form">
            {{category.id_cat}}
        </div>
    </div>

</div>

控制器：

function addCategory() {
        $mdDialog.show({
            templateUrl: 'app/views/modal/addCategory.html',
            clickOutsideToClose: false,
            controller: 'adminController',
            controllerAs: 'adminCtr'
        });
    }

    function initCategory() {
        adminService.initCategory().then(function (data) {
            vm.allCategories = data.categories;
        })
    }

    function createCategory(category) {
        adminService.createCategory(category).then(function (data) {
            if(data.success == false) {
                vm.categoryError = data.error;
            } else {
                vm.categoryError = '';
                cancelModal();
                initCategory();
                $location.path('/admin/category');
                $timeout(function () {
                    $mdToast.show(
                        $mdToast.simple()
                            .textContent('Kategorija je uspešno kreirana')
                            .position('top right')
                            .theme("success-toast")
                            .hideDelay(5000)
                    );
                }, 500);
            }
        })
    }

    function cancelModal() {
        $mdDialog.hide();
    }

服务：

function createCategory(category) {
        return $http.post('api/admin/createCategory', {
            category: category,
            idUser: $rootScope.globals.currentUser.idUser,
            token: $rootScope.globals.currentUser.token
        }).then(function(response) {
            return response.data;
        });
    }

    function initCategory() {
        return $http.post('api/admin/getAllCategories', {
            idUser: $rootScope.globals.currentUser.idUser,
            token: $rootScope.globals.currentUser.token
        }).then(function(response) {
            return response.data;
        });
    }

我尝试再次调用 init 函数来更新 vm.allCategories 但没有任何成功。

有人知道解决办法吗？

附：我尝试使用 $scope.apply() 但出现错误，顺便说一句，我使用 angular 1.6.2。

Answer 1

在服务中删除承诺。您正在使用 promise 将响应缓存在控制器中。所以还需要在服务中添加一个承诺。

 function initCategory() {
        return $http.post('api/admin/getAllCategories', {
            idUser: $rootScope.globals.currentUser.idUser,
            token: $rootScope.globals.currentUser.token
        }) 
  }

在这样的控制器更新中

function initCategory() {
        adminService.initCategory().then(function (res) {
            vm.allCategories = res.data.categories; // in the response data comes inside data property. 
        })
}

Answer 2

如下更改您的 HTML 模板：

<div class="col-lg-4 margin-bottom-20" ng-repeat="category in adminCtr.allCategories track by category.id_cat">

和你的 JS

function initCategory() {
    adminService.initCategory().then(function(data) {
        $scope.$evalAsync(function(){
            vm.allCategories = data.categories;
        });
    })
}

演示

angular.module('myApp', []);

angular
  .module('myApp')
  .controller('MyController', MyController);

MyController.$inject = ['$scope', '$timeout'];

function MyController($scope, $timeout) {
  var vm = this;
  var a = [{
    "id_cat": "1",
    "name": "fgfdgfd"
  }, {
    "id_cat": "2",
    "name": "dfgfdgdf"
  }, {
    "id_cat": "3",
    "name": "dfgfdgdffdgdfg"
  }];
  var b = [{
    "id_cat": "1",
    "name": "fgfdgfd"
  }, {
    "id_cat": "2",
    "name": "dfgfdgdf"
  }, {
    "id_cat": "3",
    "name": "dfgfdgdffdgdfg"
  }, {
    "id_cat": "4",
    "name": "dfgfdgdfg"
  }, {
    "id_cat": "5",
    "name": "dfdsfsdfsdfsd"
  }, {
    "id_cat": "6",
    "name": "sdfdsfsdfsdfsdfsd"
  }, {
    "id_cat": "7",
    "name": "dfgfdgfgfgfdgdf"
  }];
  vm.allCategories = a;

  $timeout(function() {
    $scope.$evalAsync(function() {
      vm.allCategories = b;
    });

  }, 2000);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController as vm">
  <div ng-repeat="category in vm.allCategories track by category.id_cat">
    {{category.name}}
  </div>
</div>