Javascript 在angularJS中使用sweetalert删除确认
我使用创建delete方法 $scope.filteredlist.splice（第1项） 但现在我想用sweetalert创建delete方法，当用户单击“是”按钮时，它将删除数据，如果用户单击“取消”按钮，它将返回页面 我面临的问题是，删除方法将在第二次单击时起作用。例如当前页面：单击删除按钮（垃圾图标），然后单击“是按钮”，然后单击“确定”按钮，然后它不工作，但当尝试再次单击垃圾图标按钮时，它将删除它。我已经将sweetalert链接到了索引中 这是我的maintenance.htmlJavascript 在angularJS中使用sweetalert删除确认,javascript,angularjs,crud,delete-row,sweetalert,Javascript,Angularjs,Crud,Delete Row,Sweetalert,我使用创建delete方法 $scope.filteredlist.splice（第1项） 但现在我想用sweetalert创建delete方法，当用户单击“是”按钮时，它将删除数据，如果用户单击“取消”按钮，它将返回页面 我面临的问题是，删除方法将在第二次单击时起作用。例如当前页面：单击删除按钮（垃圾图标），然后单击“是按钮”，然后单击“确定”按钮，然后它不工作，但当尝试再次单击垃圾图标按钮时，它将删除它。我已经将sweetalert链接到了索引中 这是我的maintenance.html &
<div id="maintenance-main">
<div class="row card-content">
<div class=" maintenance-box">
<h3><strong>Maintenance</strong></h3>
</div>
<section ng-controller="maintenanceCtrl as panel">
<ul class="nav nav-tabs nav-justified responsive-tabs">
<li ng-class="{active:panel.isSelected(1)}">
<a href="" ng-click="panel.selectTab(1)">Project</a>
</li>
<li ng-class="{active:panel.isSelected(2)}">
<a href="" ng-click="panel.selectTab(2)">Project Estimation</a>
</li>
<li ng-class="{active:panel.isSelected(3)}">
<a href="" ng-click="panel.selectTab(3)">Timeline</a>
</li>
<li ng-class="{active:panel.isSelected(4)}">
<a href="" ng-click="panel.selectTab(4)">Test Execution</a>
</li>
<li ng-class="{active:panel.isSelected(5)}">
<a href="" ng-click="panel.selectTab(5)">Defect</a>
</li>
<li ng-class="{active:panel.isSelected(6)}">
<a href="" ng-click="panel.selectTab(6)">Status</a>
</li>
</ul>
<div class="row step-content">
<form>
<div class="panel" ng-show="panel.isSelected(1)">
<div maintenance-project><!--name of directive in js (MaintenanceProject) not same in html because AngularJS will handle translating the camel cased name when we define it to the snake case-->
</div>
</div>
<div class="panel" ng-show="panel.isSelected(2)">
<div maintenance-project-estimation>
</div>
</div>
<div class="panel" ng-show="panel.isSelected(3)">
<div maintenance-timeline>
</div>
</div>
<div class="panel" ng-show="panel.isSelected(4)">
<div maintenance-test-execution>
</div>
</div>
<div class="panel" ng-show="panel.isSelected(5)">
<div maintenance-defect>
</div>
</div>
<div class="panel" ng-show="panel.isSelected(6)">
<div maintenance-status>
</div>
</div>
</form>
</div>
</section>
</div>
'use strict';app.controller('maintenanceCtrl', ["$scope", function($scope) {
//this.tab=1 to show that the first view must in tab 1 which is project
this.tab=1;
this.selectTab = function (setTab){
this.tab=setTab;
};
this.isSelected=function(checkTab){
return this.tab==checkTab;
};}]);
<ng-form name="projecttable"><div class="col-md-12 content-maintenance">
<h4>
<strong>Project
</strong>
</h4>
<div class="input-group">
<input class="form-control" ng-model="filterproject" placeholder="FILTER" type="text"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-filter"></span> Filter
</span>
</div>
<br>
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead >
<tr>
<th><i class="mandatory">*</i>PPMID</th>
<th><i class="mandatory">*</i>EPRID</th>
<th><i class="mandatory">*</i>Release ID</th>
<th><i class="mandatory">*</i>Project Name</th>
<th><i class="mandatory">*</i>Release Name</th>
<th><i class="mandatory">*</i>Application Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<th>
<input class="form-control" ng-model="PPMID" name="ppmid" id="ppmid" type="number" min="1" placeholder="PPMID" ng-required="true" ng-class="{required: projecttable.ppmid.$invalid && projecttable.ppmid.$touched}" >
<div class="errormessage" ng-show="projecttable.ppmid.$invalid && projecttable.ppmid.$touched">
<span>Enter valid PPMID</span>
</div>
</th>
<th>
<input class="form-control" ng-model="EPRID" name="eprid" id="eprid" type="number" min="1" placeholder="EPRID" ng-required="true" ng-class="{required: projecttable.eprid.$invalid && projecttable.eprid.$touched}" >
<div class="errormessage" ng-show="projecttable.eprid.$invalid && projecttable.eprid.$touched">
<span>Enter valid EPRID</span>
</div>
</th>
<th>
<input class="form-control" name="releaseid" ng-model="Releaseid" id="releaseid" type="text" placeholder="Release ID" ng-required="true" ng-class="{required: projecttable.releaseid.$invalid && projecttable.releaseid.$touched}" >
<div class="errormessage" ng-show="projecttable.releaseid.$invalid && projecttable.releaseid.$touched">
<span>Enter valid ReleaseID</span>
</div>
</th>
<th>
<input class="form-control" name="projectname" ng-model="projectname" id="projectname" type="text" placeholder="Project Name" ng-required="true" ng-class="{required: projecttable.projectname.$invalid && projecttable.projectname.$touched}" >
<div class="errormessage" ng-show="projecttable.projectname.$invalid && projecttable.projectname.$touched">
<span>Enter valid Project Name</span>
</div>
</th>
<th>
<input class="form-control" name="releasename" ng-model="releasename" id="releasename" type="text" placeholder="Release Name" ng-required="true" ng-class="{required: projecttable.releasename.$invalid && projecttable.releasename.$touched}" >
<div class="errormessage" ng-show="projecttable.releasename.$invalid && projecttable.releasename.$touched">
<span>Enter valid Release Name</span>
</div>
</th>
<th>
<input class="form-control" name="appname" ng-model="appname" id="applicationname" type="text" placeholder="Application Name" ng-required="true" ng-class="{required: projecttable.appname.$invalid && projecttable.appname.$touched}" >
<div class="errormessage" ng-show="projecttable.appname.$invalid && projecttable.appname.$touched">
<span>Enter valid Application Name</span>
</div>
</th>
<th>
<button ng-click="addproject()" class="btn btn-primary" ng-disabled="projecttable.$invalid || projecttable.$touched">
<span class="glyphicon glyphicon-plus"></span>
</button>
</th>
</tr>
<tr ng-repeat="item in filteredlist | filter: filterproject" ng-include="loadTemplateproject(item)">
</tr>
<!--orderBy=it will arrage the data, as default is is ascending. true:decending false:ascending| filter= allow to filter the table
<tr ng-repeat="item in filteredlist | orderBy: 'PPMID' | filter:filterproject">
<td>{{item.PPMID}}</td>
<td>{{item.EPRID}}</td>
<td>{{item.Releaseid}}</td>
<td>{{item.projectname}}</td>
<td>{{item.releasename}}</td>
<td>{{item.appname}}</td>
<td>
<button type="button" class="btn btn-default" ng-click="">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button ng-click="remove()" type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>-->
</tbody>
</table>
<script type="text/ng-template" id="viewproject">
<td>{{item.PPMID}}</td>
<td>{{item.EPRID}}</td>
<td>{{item.Releaseid}}</td>
<td>{{item.projectname}}</td>
<td>{{item.releasename}}</td>
<td>{{item.appname}}</td>
<td>
<button type="button" class="btn btn-default" ng-click="editContentproject(item)">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button ng-click="removeproject($index)" type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</script>
<script type="text/ng-template" id="editproject">
<td> <input class="form-control" ng-model="editablerow.PPMID" id="ppmid" type="number" min="1" ></td>
<td><input class="form-control" ng-model="editablerow.EPRID" id="eprid" type="number" min="1" ></td>
<td><input class="form-control" ng-model="editablerow.Releaseid" id="releaseid" type="text" ></td>
<td><input class="form-control" ng-model="editablerow.projectname" id="projectname" type="text" ></td>
<td><input class="form-control" ng-model="editablerow.releasename" id="releasename" type="text"></td>
<td><input class="form-control" ng-model="editablerow.appname" id="applicationname" type="text" ></td>
<td>
<button type="button" class="btn btn-default" ng-click="saveDataproject($index)">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button ng-click="resetproject()" type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</script>
</div>
请帮助我，提前谢谢根据我的理解，什么是
swal$scope.filteredlist.splice（第1项）之后添加$scope.$applyAsync
。像这样$scope.filteredlist.splice（第1项）$作用域。$applyAsync（）
@StepanKasyanenko它像cham一样工作。但是您能解释一下为什么需要使用$scope.$applyAsync（）。这真的会在将来帮助别人，我在这里无法解释。读这个。错误#10.swal
是什么？@stepankasysanenko根据我的理解。使用sweetalert在构建警报框时需要swal。这有点像语法。好吧，在$scope.filteredlist.splice（第1项）之后添加$scope.$applyAsync
。像这样$scope.filteredlist.splice（第1项）$作用域。$applyAsync（）
@StepanKasyanenko它像cham一样工作。但是您能解释一下为什么需要使用$scope.$applyAsync（）。这真的会在将来帮助别人，我在这里无法解释。读这个。错误10。
<ng-form name="projecttable"><div class="col-md-12 content-maintenance">
<h4>
<strong>Project
</strong>
</h4>
<div class="input-group">
<input class="form-control" ng-model="filterproject" placeholder="FILTER" type="text"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-filter"></span> Filter
</span>
</div>
<br>
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead >
<tr>
<th><i class="mandatory">*</i>PPMID</th>
<th><i class="mandatory">*</i>EPRID</th>
<th><i class="mandatory">*</i>Release ID</th>
<th><i class="mandatory">*</i>Project Name</th>
<th><i class="mandatory">*</i>Release Name</th>
<th><i class="mandatory">*</i>Application Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<th>
<input class="form-control" ng-model="PPMID" name="ppmid" id="ppmid" type="number" min="1" placeholder="PPMID" ng-required="true" ng-class="{required: projecttable.ppmid.$invalid && projecttable.ppmid.$touched}" >
<div class="errormessage" ng-show="projecttable.ppmid.$invalid && projecttable.ppmid.$touched">
<span>Enter valid PPMID</span>
</div>
</th>
<th>
<input class="form-control" ng-model="EPRID" name="eprid" id="eprid" type="number" min="1" placeholder="EPRID" ng-required="true" ng-class="{required: projecttable.eprid.$invalid && projecttable.eprid.$touched}" >
<div class="errormessage" ng-show="projecttable.eprid.$invalid && projecttable.eprid.$touched">
<span>Enter valid EPRID</span>
</div>
</th>
<th>
<input class="form-control" name="releaseid" ng-model="Releaseid" id="releaseid" type="text" placeholder="Release ID" ng-required="true" ng-class="{required: projecttable.releaseid.$invalid && projecttable.releaseid.$touched}" >
<div class="errormessage" ng-show="projecttable.releaseid.$invalid && projecttable.releaseid.$touched">
<span>Enter valid ReleaseID</span>
</div>
</th>
<th>
<input class="form-control" name="projectname" ng-model="projectname" id="projectname" type="text" placeholder="Project Name" ng-required="true" ng-class="{required: projecttable.projectname.$invalid && projecttable.projectname.$touched}" >
<div class="errormessage" ng-show="projecttable.projectname.$invalid && projecttable.projectname.$touched">
<span>Enter valid Project Name</span>
</div>
</th>
<th>
<input class="form-control" name="releasename" ng-model="releasename" id="releasename" type="text" placeholder="Release Name" ng-required="true" ng-class="{required: projecttable.releasename.$invalid && projecttable.releasename.$touched}" >
<div class="errormessage" ng-show="projecttable.releasename.$invalid && projecttable.releasename.$touched">
<span>Enter valid Release Name</span>
</div>
</th>
<th>
<input class="form-control" name="appname" ng-model="appname" id="applicationname" type="text" placeholder="Application Name" ng-required="true" ng-class="{required: projecttable.appname.$invalid && projecttable.appname.$touched}" >
<div class="errormessage" ng-show="projecttable.appname.$invalid && projecttable.appname.$touched">
<span>Enter valid Application Name</span>
</div>
</th>
<th>
<button ng-click="addproject()" class="btn btn-primary" ng-disabled="projecttable.$invalid || projecttable.$touched">
<span class="glyphicon glyphicon-plus"></span>
</button>
</th>
</tr>
<tr ng-repeat="item in filteredlist | filter: filterproject" ng-include="loadTemplateproject(item)">
</tr>
<!--orderBy=it will arrage the data, as default is is ascending. true:decending false:ascending| filter= allow to filter the table
<tr ng-repeat="item in filteredlist | orderBy: 'PPMID' | filter:filterproject">
<td>{{item.PPMID}}</td>
<td>{{item.EPRID}}</td>
<td>{{item.Releaseid}}</td>
<td>{{item.projectname}}</td>
<td>{{item.releasename}}</td>
<td>{{item.appname}}</td>
<td>
<button type="button" class="btn btn-default" ng-click="">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button ng-click="remove()" type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>-->
</tbody>
</table>
<script type="text/ng-template" id="viewproject">
<td>{{item.PPMID}}</td>
<td>{{item.EPRID}}</td>
<td>{{item.Releaseid}}</td>
<td>{{item.projectname}}</td>
<td>{{item.releasename}}</td>
<td>{{item.appname}}</td>
<td>
<button type="button" class="btn btn-default" ng-click="editContentproject(item)">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button ng-click="removeproject($index)" type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</script>
<script type="text/ng-template" id="editproject">
<td> <input class="form-control" ng-model="editablerow.PPMID" id="ppmid" type="number" min="1" ></td>
<td><input class="form-control" ng-model="editablerow.EPRID" id="eprid" type="number" min="1" ></td>
<td><input class="form-control" ng-model="editablerow.Releaseid" id="releaseid" type="text" ></td>
<td><input class="form-control" ng-model="editablerow.projectname" id="projectname" type="text" ></td>
<td><input class="form-control" ng-model="editablerow.releasename" id="releasename" type="text"></td>
<td><input class="form-control" ng-model="editablerow.appname" id="applicationname" type="text" ></td>
<td>
<button type="button" class="btn btn-default" ng-click="saveDataproject($index)">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button ng-click="resetproject()" type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</script>
</div>
app.directive('maintenanceProject', [function() {
return{
restrict: 'EA',
scope: {},
templateUrl: 'modules/maintenance/maintenance-project.html',
link: function($scope, element, attrs)
{
$scope.filteredlist=getdummydata ();
$scope.editablerow = '';
function getdummydata()
{
return [
{
PPMID:10101,
EPRID:10201,
Releaseid: 10301,
projectname:'a',
releasename:'b',
appname:'c'
},
{
PPMID:40102,
EPRID:40202,
Releaseid: 40302,
projectname:'d',
releasename:'e',
appname:'f'
},
{
PPMID:50103,
EPRID:50203,
Releaseid: 50303,
projectname:'g',
releasename:'h',
appname:'i'
},
{
PPMID:60104,
EPRID:60204,
Releaseid: 60304,
projectname:'j',
releasename:'k',
appname:'l'
},
{
PPMID:70105,
EPRID:70205,
Releaseid: 70305,
projectname:'m',
releasename:'n',
appname:'o'
},
{
PPMID:80106,
EPRID:80206,
Releaseid: 80306,
projectname:'p',
releasename:'q',
appname:'r'
}];
}
$scope.addproject=function()
{ //use unshift to add item in beginning of array
$scope.filteredlist.unshift(
{
PPMID: $scope.PPMID,
EPRID:$scope.EPRID,
Releaseid:$scope.Releaseid,
projectname:$scope.projectname,
releasename:$scope.releasename,
appname:$scope.appname
});
$scope.resetAll();
}
//to make its empty (reset back) for add
$scope.resetAll = function()
{
$scope.filteredList = '' ;
$scope.PPMID = '';
$scope.EPRID = '';
$scope.Releaseid = '';
$scope.projectname = '';
$scope.releasename = '';
$scope.appname = '';
}
//remove utk delete whole row (gmbr trash)
$scope.removeproject=function(item){
swal({
title: "Proceed to delete the selected record?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete!",
cancelButtonText: "No, cancel!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm){
if(isConfirm){
$scope.filteredlist.splice(item,1);
swal("deleted!","Your file is deleted/.", "success");
}
else{
swal("Cancelled!", "Cancelled");
return 'viewproject';
}
});
}
/*$scope.removeproject=function(item)
{
$scope.filteredlist.splice(item,1);
}*/
//for edit function
$scope.editContentproject=function(item)
{
$scope.editablerow=angular.copy(item);//now edittablerow hold value item id=..
}
$scope.loadTemplateproject= function(item)
{
if(item.Releaseid===$scope.editablerow.Releaseid) return 'editproject';
else
return 'viewproject';
}
$scope.saveDataproject = function (indx)
{
$scope.filteredlist[indx] = angular.copy($scope.editablerow);
$scope.resetproject();
}
//ni reset for cancel
$scope.resetproject=function(){
$scope.editablerow=[];
}
}
}; }])