使用angularJS中的sweetalert删除确认

时间:2016-11-29 03:20:55

标签: javascript angularjs crud delete-row sweetalert

我设法使用

创建删除方法
  

$ 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=[];
    }

  }
}; }])

请提前帮助我

0 个答案:

没有答案