我设法使用
创建删除方法$ scope.filteredlist.splice(项目,1);
但现在我想用sweetalert创建删除方法,当用户点击“是”按钮时,它会删除数据,如果用户点击“取消”按钮,它将返回页面。
我面临的问题是删除方法将在第二次单击时工作。例如当前页面:单击删除按钮(垃圾图标)然后单击“是”按钮然后单击“确定”按钮然后它不起作用但是当尝试再次单击“删除”图标按钮时,它将删除它。我已将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>
这是maintenance.js
'use strict';app.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('maintenance', {
url: "/maintenance",
views: {
'navbar': {
templateUrl: "components/qmc-header/qmc-header.html",
},
'content': {
controller: "maintenanceCtrl",
templateUrl: 'modules/maintenance/maintenance.html'
}
}
})}]);
这是maintenance-ctrl.js
'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;
};}]);
维护project.html
<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>
这是maintenance-project-directive.js
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=[];
}
}
}; }])
请提前帮助我