Javascript 使用新数据重新加载并重复

我有一个服务，我只返回一个包含所有可用视频的列表，然后将其注入控制器，这样我就可以执行

ng repeat

来列出这些视频。就这样

videosApp.factory('VideosService', function ($http, $rootScope) {
    $rootScope.videos = {
        list: [],
    };

    $http.get('/panel/videos')
        .then(
            function (response) {
                $rootScope.videos.list = response.data;
            },
            function () {
                alert('what is the velocity of a swallow?');
            }
        );

    return $rootScope;
});

videosApp.controller('VideosController', [
    '$scope', '$http', '$filter', '$window',
    function ($scope, $http, VideosService) {

        $scope.deleteVideo = function(id) {    
            if (confirm('Are you sure you want to delete this video?')) {
                $http.delete('/panel/videos/'+id)
                    .then(
                        function (response) {
                            growl(response.data.message, 'success');
                        },
                        function (response) {
                            growl(response.data.message, 'danger');
                        }
                    );
            }
        }

    }
]);

现在，对于HTML输出：

<div id="videos-listing" class="row" ng-controller="VideosController">
    <ul>
        <li ng-repeat="video in videos.list">
            {{video.name}}
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                <li role="presentation">
                    <a role="menuitem" href="#delete" ng-click="deleteVideo(video.id)">Delete</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

{{video.name}

现在，正如您所看到的，还有一个

Delete

函数，它工作得非常好。我的问题是，在删除特定项目后，如何刷新该列表

我可以将

get/panel/videos

包装在一个函数中，并在删除成功后再次调用它，但是，我如何刷新该函数？或者，有没有更好的方法呢？

试试以下方法：

HTML

<a role="menuitem" href="#delete" ng-click="deleteVideo(video)">Delete</a>

更新

也可以考虑使用一些集合帮助器，如

您的代码如下所示，然后：

JS:

HTML

---

它还添加了许多其他功能；）

如果您在删除后尝试调用/panel/videos，则会自动刷新视图！比执行另一个服务器请求要好得多。很好的建议。或者你可以使用

。.remove（$scope.videos.list，video）
$scope.deleteVideo = function(video) {    
    if (confirm('Are you sure you want to delete this video?')) {
        $http.delete('/panel/videos/'+video.id)
            .then(
                function (response) {
                    growl(response.data.message, 'success');
                    $scope.videos.list.splice($scope.videos.list.indexOf(video),1);
                },
                function (response) {
                    growl(response.data.message, 'danger');
                }
            );
    }
}

$rootScope.videos.list = new Backbone.Collection();
$rootScope.videos.list.reset(response.data);

...
$scope.videos.list.remove(video);

<li ng-repeat="video in videos.list.models">