AngularJS:如何添加新的POST'将项添加到$scope而不刷新页面

AngularJS: How to add newly POST'ed item to the $scope without a page refresh?

本文关键字：添加 scope 刷新 何添加 AngularJS POST      更新时间：2023-09-26

这是我的控制器：

app.controller('mainCtrl',function($scope,$http){
    $http.post('/node/api/stickies', $scope.formData)
          .then(function(data){
               $http.get('/node/api/stickies').success(function(data){
                   $scope.stickies = data;
                   })
           })
     });

现在肯定不行。我觉得$http.post里面的$http.get可能把事情搞砸了。但是，在不刷新页面的情况下，我还能如何更新$scope.stickies？

期望的行为：我在页面上的ul中有一个名为stickies的项目列表。贴纸上方有一个帖子表单，它将新的贴纸添加到数据库中。我想让我的ul在不刷新页面的情况下添加新发布的贴纸。

 <form ng-submit = "createSticky()">
                    <input ng-model="formData.data" type="textarea" name="sticky_content" placeholder="add sticky text" required="true"/>
                    <input ng-model="formData.end" type="text" name="time_end" placeholder="expiration time (sec from current)" required="true"/>
                    <button type="submit" name="add_sticky" value="add a new stickie!">new sticky</button>
            </form>
            <div id = "stickies_list" class="row">
                    <ul id = "stickies"> 
                        <span class="sticky">
                                <li ng-repeat="stickie in stickies" ng-click="match(stickie)">
                                <h2>{{stickie.data}}</h2><br><br><br><br><br>
                                start time: <h10><mydate>{{stickie.start | date:'MM/dd/yyyy @ h:mma'}}</mydate></h10><br>
                                stop time: <h10><mydate>{{stickie.end | date:'MM/dd/yyyy @ h:mma'}}</mydate></h10><br><br>
                                Delete?: <input id="delete_checkbox" type="button" ng-click="deleteSticky(stickie.id)">
                                </li>
                        </span>
                    </ul>
            </div>

您需要通过将$http服务注入您的控制器来包含该服务：

app.controller('mainCtrl', function($scope, $http){
  ...
});
相关文章：