自定义删除angularJS确认 [英] Custom delete confirm in angularJS
问题描述
我有项目的列表的角应用程式。我试着去实现一个自定义确认删除模式，这样，当用户点击一个项目旁边的删除按钮，模态开来确认删除。上点击是，一个deleteItem（）函数被触发。我的问题是，服务器返回404未找到删除请求。它的工作原理，当我使用标准的jQuery确认对话框，所以我猜这个项目的ID是没有得到通过模态删除功能通过。谁能帮助？
＆LT; DIV CLASS =span6＆GT;
＆LT;表类=table表条纹表浓缩＆GT;
＆LT;＆THEAD GT;
＆所述; TR＆GT;
百分位风格=最小宽度：80px;＆GT;名称：LT; /第i
百分位风格=宽度：20像素;＆GT; ＆LT; /第i
百分位风格=宽度：20像素;＆GT; ＆LT; /第i
＆LT; / TR＆GT;
＆LT; / THEAD＆GT;
＆LT;＆TBODY GT;
＆LT; TR NG重复=项中的项目|过滤器：查询|排序依据：orderProp＆GT;
＆所述; TD＆GT; {{item.name}}＆下; / TD＆GT;
＆LT; TD＆GT;＆LT;一个NG点击=editItem（item.id）级=BTN BTN小BTN-主要＆gt;编辑＆LT; / A＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;一个NG点击=openModal（item.id）级=BTN BTN小BTN-成功＆GT;删除＆LT; / A＆GT;＆LT; / TD＆GT; ＆LT; / TR＆GT;
＆LT; / TBODY＆GT;
＆LT; /表＆gt; ＆LT;模态，对话框显示='modalShown'ID =itemModalWIDTH =300像素的身高= '40％'＆GT;
＆LT; P＆gt;的你确定要删除这个项目＆lt; P＆GT;
＆LT;按钮NG点击=deleteItem（item.id）级=链接＆GT;是＆LT; /按钮＆GT;
＆LT; /莫代尔-对话框＆GT; ＆LT; / DIV＆GT;
下面的控制器：
angular.module（'myApp.controllers'）
.controller（'ItemCtrl'，['$范围，ItemsFactory'，'ItemFactory'，'$的位置，$路线'，
功能（$范围，ItemsFactory，ItemFactory，$位置$路线）{ $ scope.modalShown = FALSE; //回调NG-点击deleteItem： $ scope.openModal =功能（的itemId）{
$ scope.modalShown = $ scope.modalShown！; }; //回调NG-点击deleteItem： $ scope.deleteItem =功能（的itemId）{ ItemFactory.delete（{ID：的itemId}）$ promise.then（功能（项）{
$ scope.items =物品;
$ location.path（'/项目'）;
$ route.reload（）;
}，功能（错误）{
console.error（ERR）;
}）; //} };
的项目不仅是已知的创建的范围内 ngRepeat 的每个元素。结果＆LT;模式 - 对话方式＆gt; 不在该范围内，没有关于知识项目
您可以重构code是这样的：
//在HTML：
＆LT;模式-对话框...＆GT;
...
＆LT;按钮NG点击=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屋！
