angularJS 中的自定义删除确认 [英] Custom delete confirm in angularJS

问题描述

我有一个带有项目列表的 angular 应用程序.我试图实现一个自定义的确认删除"模式，这样当用户点击项目旁边的删除"按钮时，模式就会打开以确认删除.单击是"时，将触发 deleteItem() 函数.我的问题是服务器返回 404 not found 删除请求.当我使用标准的 jquery 确认对话框时它起作用，所以我猜项目 ID 没有通过模式传递给删除函数.有人可以帮忙吗?

 
<table class="table table-striped table-condensed"><头><tr><th style="min-width: 80px;">Name:</th><th style="width:20px;"></th><th style="width:20px;"></th></tr></thead><tr ng-repeat="item in items | filter:query | orderBy:orderProp"><td>{{ item.name }}</td><td><a ng-click="editItem(item.id)" class="btn btn-small btn-primary">编辑</a></td><td><a ng-click="openModal(item.id)" class="btn btn-small btn-success">删除</a></td></tr></tbody><modal-dialog show='modalShown' id = "itemModal" width='300px' height='40%'><p>您确定要删除此项目吗?<p><button ng-click = "deleteItem(item.id)" class = "link">Yes</button></modal-dialog>

这是控制器:

angular.module('myApp.controllers').controller('ItemCtrl', ['$scope', 'ItemsFactory', 'ItemFactory', '$location', '$route',函数 ($scope, ItemsFactory, ItemFactory, $location, $route) {$scope.modalShown = false;//ng-click 'deleteItem' 的回调:$scope.openModal = 函数(itemId){$scope.modalShown = !$scope.modalShown;};//ng-click 'deleteItem' 的回调:$scope.deleteItem = 函数 (itemId) {ItemFactory.delete({ id: itemId }).$promise.then(function (items){$scope.items = 物品；$location.path('/items');$route.reload();}, 函数(错误){控制台错误(错误)；});//}};

解决方案

item 仅在 ngRepeat 为每个元素创建的范围内已知".
不在该范围内，并且不了解 item.

你可以像这样重构代码:

//在 HTML 中:<模态对话框...>...<button ng-click="deleteItem()" ...//在控制器中:$scope.modalShown = false;$scope.itemToDeleteId;...$scope.openModal = 函数(itemId){$scope.itemToDeleteId = itemId;$scope.modalShown = true;};...$scope.deleteItem = 函数 () {如果(！$scope.itemToDeleteId){返回；}var itemId = $scope.itemToDeleteId;$scope.itemToDeleteId = null;...

I have an angular app with a list of items. Im trying to implement a custom "Confirm Delete" modal, so that when the user clicks the "Delete" button beside an item, the modal open to confirm deletion. On clicking "Yes", a deleteItem() function is triggered. My problem is that the server is returning 404 not found for the delete request. It works when I use the standard jquery confirm dialog, so I'm guessing the item ID isn't getting passed through the modal to the delete function. can anyone help?

   <div class="span6">
        <table class="table table-striped table-condensed">
            <thead>
            <tr>
                <th style="min-width: 80px;">Name:</th>
                <th style="width:20px;"> </th>
                <th style="width:20px;"> </th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="item in items | filter:query | orderBy:orderProp">
                <td>{{ item.name }}</td>


                <td><a ng-click="editItem(item.id)" class="btn btn-small btn-primary">Edit</a></td>
                <td><a ng-click="openModal(item.id)" class="btn btn-small btn-success">Delete</a></td>

            </tr>
            </tbody>
        </table>

          <modal-dialog show='modalShown' id = "itemModal" width='300px' height='40%'>
                  <p>Are you sure you want to delete this item?<p>
                      <button ng-click = "deleteItem(item.id)" class = "link">Yes</button>
          </modal-dialog>

    </div>

Here's the controller:

angular.module('myApp.controllers')
    .controller('ItemCtrl', ['$scope', 'ItemsFactory', 'ItemFactory', '$location', '$route',
        function ($scope, ItemsFactory, ItemFactory, $location, $route) {

             $scope.modalShown = false;

         //callback for ng-click 'deleteItem':

            $scope.openModal = function (itemId) {
                $scope.modalShown = !$scope.modalShown;

            };

        //callback for ng-click 'deleteItem':

            $scope.deleteItem = function (itemId) {

                ItemFactory.delete({ id: itemId }).$promise.then(function (items){
                    $scope.items = items;
                    $location.path('/items'); 
                    $route.reload();
                }, function (err) {
                    console.error(err);
                });    

                // } 

            };

解决方案

The item is only "known" inside the scope created by the ngRepeat for each element.
<modal-dialog> is not inside that scope and has no knowledge about item.

You could refactor the code like this:

// In HTML:
<modal-dialog ...>
    ...
    <button ng-click="deleteItem()" ...

// In controller:
$scope.modalShown = false;
$scope.itemToDeleteId;
...
$scope.openModal = function (itemId) {
    $scope.itemToDeleteId = itemId;
    $scope.modalShown = true;
};
...
$scope.deleteItem = function () {
    if (!$scope.itemToDeleteId) { return; }
    var itemId = $scope.itemToDeleteId;
    $scope.itemToDeleteId = null;
    ...

这篇关于angularJS 中的自定义删除确认的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！