Angularjs:使用确认框

时间:2017-12-10 18:37:22

标签: angularjs angularjs-ng-repeat rowdeleting

我想通过单击删除按钮从ng-repeat表中删除一行。按钮工作正常,但我想在单击删除按钮后显示一个确认框,如果用户选择是,那么只有它应该删除该特定行,否则不。有人有任何解决方案吗?

        <script>
           var app= angular.module("myapp",[]);
            app.controller("mycontroller",function ($scope, $http)
                //get data from database
                {
                $http.get("getData.php").then(function (response) {
                    $scope.names = response.data.records;});
                            //Remove record
                                    $scope.remove = function(index,xid){

                                  var url = "remove.php?xid="+xid;

                                  $http.get(url).then(function successCallback(response) {

                                   $scope.names.splice(index, 1);

                                   $http.get("getData.php").then(function (response) {
                                        $scope.names = response.data.records;
                                    });
                                  }); 

                });    

               </script>
               <body ng-app ="myapp" ng-controller="mycontroller">

        <table border=1>

                <tr   ng-repeat="x in names  | filter: searchText | orderBy:sortColumn">

                    <td>{{x.Bank}}</td>
                    <td>{{x.cname}}</td>
                    <td >{{x.cfees}}</td>
                    <td>{{x.fpaid }}</td>
                    <td ng-model="bfess">{{x.cfees-x.fpaid}}</td>
                    <td>{{x.sdate | date:'dd-MM-yyyy'}}</td>
                    <td>{{x.edate | date:'dd-MM-yyyy'}}</td>
                    <td>{{calDate(x.edate,x.sdate)}}</td>
                    <td>{{calDate(x.edate,getToday()| date:'dd-MM-yyyy')}}</td>     
                    <td><button type="button" class="btn btn-danger"  ng-click="remove($index,x.id);" value="Delete">Delete</button></td>
            </tr>
            <tr>
                <td>Total fess paid by students: {{ calcTotal(names) }}</td>
            </tr>

        </table>

1 个答案:

答案 0 :(得分:0)

您可以使用javascript的确认功能。阅读:https://www.w3schools.com/jsref/met_win_confirm.asp

要使用它,您需要在删除http请求之前添加确认步骤:

$scope.remove = function(index,xid){
     var url = "remove.php?xid="+xid;
     if(confirm("Do you really want to delete entry " + xid + "?\nConfirm with ok.")){
         $http.get(url).then(function successCallback(response) {
              $scope.names.splice(index, 1);
              $http.get("getData.php").then(function (response) {
                  $scope.names = response.data.records;
              });
          });
     }
}

如果用户按下'确认',则确认对话框返回true。在显示的对话框中。如果他按下取消&#39;该函数返回false,在这种情况下,不会发生任何事情。

编辑:添加了另一个&#34;)&#34;在if语句之后。