javascript - ngResource 使用 $delete 从查询对象中删除记录

标签 javascript angularjs notifications

对 Angular 来说相当陌生。我想使用 Angular 的 $resource 库来使用我们的 API 服务。我对删除通过 query() 方法获得的记录的正确方法有点迷失。具体来说,我们有一个用于用户通知的端点。我们希望在页面加载时获取所有用户通知,使用 ng-repeat 循环结果并在导航栏中显示通知。当用户单击删除图标时,应删除相应的通知。这是我当前拥有的代码的精简版本:

Js:

angular.module('myapp', ['ngResource']).factory('Notifications',function($resource){
    return $resource('/apiv2/user/notifications/:id', {id:'@id'});
}).controller('NavigationController',['$scope','Notifications',function($scope, Notifications){
    $scope.notifications = Notifications.query();

    $scope.deleteNotification = function(notification){
        notification.$delete();
    };
}]);

HTML:

<ul>
    <li ng-repeat="notification in notifications">
        <i class="icon-remove" ng-click="deleteNotification(notification)"></i>
    </li>
</ul>

使用此代码,当用户单击删除图标时,单个通知对象将传递到 deleteNotification 方法,并通过 api 从后端正确删除。到目前为止,一切都按预期进行。但是,如果我事后查看 $scope.notifications 对象,刚刚删除的通知仍然包含损坏的数据:

{$promise:未定义,$resolved:true}

理想情况下,我希望从通过 .query() 方法返回的对象中删除此记录,以反射(reflect)其在后端的状态,而不必执行新的 .query()。

如有任何帮助,我们将不胜感激!对于模糊的描述和/或不完整/不准确的代码,我深表歉意,我在晚餐时通过手机键盘凭内存输入了这一切,所以天知道我是否错过了一些东西。

最佳答案

更好的方法:(请参阅 AngularJS ngResource delete event )

$scope.deleteNotification = function (index) {
  $scope.notifications[index].$delete();
  $scope.notifications.splice(index, 1);
}

在你的标记中就这样做

ng-click="deleteNotification($index)"

可能有更好的方法来做到这一点,因为这会引发控制台错误(但仍然有效),但这就是我正在做的:

$scope.notifications = Notifications.query();

$scope.deleteNotification = function(notification){
    notification.$delete();
    $scope.notifications = $scope.notifications.filter( function(n)
        return (n != notification);
    }); // filter everything but
};

如果你使用下划线,有一种更漂亮的方式来编写删除内容。

关于javascript - ngResource 使用 $delete 从查询对象中删除记录,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26941854/

相关文章:

javascript - 如何使用 ajax 将数据从 Flask 获取到我的模板?

angularjs - 如何使用 Restangular 通过 GET 发送参数数组

push-notification - Firebase 通知无法使用 FCM 服务正常工作

javascript - 在选择框/下拉列表中仅显示唯一值

javascript - 具有相同类的元素 id 的数组

javascript - 如何在 swagger 中设置路由参数的数据类型?

AngularJs 通过 URL 获取路由

angularjs - 测试具有许多依赖项的 Angular Controller

android - 即使应用程序被杀死,也会在特定时间从 Android 操作系统获取通知

audio - 自定义通知声音无法播放Windows Universal App 8.1