AngularJS - 添加数据时 ng-repeat 不更新

Question

我正在尝试通过从数据库中获取数据来更新数据列表。每次我会添加一个数据，它不会更新视图，只有当我刷新页面时视图才会更新。我通过使用 $scope.apply 并重新排列我的代码的位置尝试了一些解决方案，这些没有任何区别。我在这里想念什么？以下是我的代码：

JS

//posting post
$scope.post = function(){
    $http.post('/post',$scope.post_detail)
    .success(function(response){
        $scope.render();
    });
}
//getting post
$scope.render = function(){
    $http.get('/post')
    .success(function(response){
        $scope.renderPost(response);
    });
}
//view post
$scope.renderPost = function(response){
    $scope.posts = response;
}
$scope.remove_post = function(id){
    $http.delete('/post/'+id).success(function(response){
        $scope.render();
    });
}
$scope.render();

HTML

<div class="jumbotron text-center" ng-controller="DashboardCtrl">
    <h1>{{title}}</h1>
    <input type="text" ng-model="post_detail.title" />
    <input type="text" ng-model="post_detail.border_color" />
    <button ng-click="post(post_detail)">Post</button>
</div>
<div ng-repeat="post in posts">
    <p>{{post.title}}</p>
    <button ng-click="remove_post(post._id)">Remove</button>
</div>

注意：删除按钮在这里有效

Answer 1

因为 ng-repeat 在 DashboardCtrl 范围之外。我猜你有一个 DashboardCtrl div 和 posts div 的父控制器，你在父控制器中启动 $scope.posts 。

当你有

$scope.renderPost = function(response){
    $scope.posts = response;
}

它更新子范围内的帖子。您可能需要执行以下操作：

$scope.$parent.posts = response;

或将 ng-repeat div 移到 <div class="jumbotron text-center" ng-controller="DashboardCtrl">...</div> 中

Answer 2

因为您只更新数据库。 将新添加的 post_detail 推送到 post 对象中。

//posting post
$scope.post = function(){
    $http.post('/post',$scope.post_detail)
    .success(function(response){
        $scope.post.push($scope.post_detail);
        $scope.render();
    });
}

Answer 3

我假设您的服务器对 $http.get('/post') 的响应是一个 json 对象数组

在这种情况下，数组可以嵌套在 data 属性中

$scope.renderPost = function(response){
    $scope.posts = response.data;
}