如何使用bootstrap模式刪除列表中的數據？

Question

我只是想使用引導模式刪除表中的數據，但似乎很難找到正確的方式如何做到這一點，這裏是我的示例代碼。在我的模式中，我有一個href代碼用於刪除數據 ，它在模態外工作。我只是想知道任何解決方案使這個工作。謝謝。

var app = angular.module('app', ['ui.bootstrap']); 
 

 
var student = [{ 
 
    name: 'Andrew' 
 
}, { 
 
    name: 'Butler' 
 
}, { 
 
    name: 'Cameron' 
 
}, { 
 
    name: 'Delo' 
 
}, { 
 
    name: 'Emman' 
 
}, { 
 
    name: 'Ferbs' 
 
}]; 
 

 
app.filter('startFrom', function() { 
 
    return function(input, start) { 
 
    if (input) { 
 
     start = +start; //parse to int 
 
     return input.slice(start); 
 
    } 
 
    return []; 
 
    } 
 
}); 
 

 
app.controller('customersCtrl', function($scope, $timeout) { 
 

 
    $scope.list = student; 
 
    $scope.currentPage = 1; //current page 
 
    $scope.entryLimit = 10; //max no of items to display in a page 
 
    $scope.filteredItems = $scope.list.length; //Initially for no filter 
 
    $scope.totalItems = $scope.list.length; 
 

 
    $scope.setPage = function(pageNo) { 
 
    $scope.currentPage = pageNo; 
 
    }; 
 

 
    $scope.filter = function() { 
 
    $timeout(function() { 
 
     $scope.filteredItems = $scope.filtered.length; 
 
    }, 10); 
 
    }; 
 

 

 
    $scope.sort_by = function(predicate) { 
 
    $scope.predicate = predicate; 
 
    $scope.reverse = !$scope.reverse; 
 
    }; 
 

 

 

 
}); 
 

 
app.filter('startsWithA', function() { 
 
    return function(items, letter) { 
 
    console.log(items, letter) 
 
    var filtered = []; 
 
    var letterMatch = new RegExp(letter, 'i'); 
 
    for (var i = 0; i < items.length; i++) { 
 
     var item = items[i]; 
 
     if (letterMatch.test(item.name.substring(0, 1))) { 
 
     filtered.push(item); 
 
     } 
 
    } 
 
    console.log(filtered); 
 
    return filtered; 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script> 
 
<div ng-app="app"> 
 
    <div class="container" ng-controller="customersCtrl"> 
 
    <div class="row"> 
 
     <div class="col-12"> 
 
     <h2 id="titleHead"><center>Student List</center></h2> 
 
     </div> 
 
     <div class="option-panel"> 
 
     <div class="col-sm-3 col-md-3 pull-right"> 
 
      <form class="navbar-form"> 
 
      <div class="input-group"> 
 
       <input type="text" ng-model="search" ng-click="filter()" placeholder="Search student" class="form-control" placeholder="Search" name="search"> 
 
      </div> 
 
      </form> 
 
     </div> 
 
     </div> 
 
     <div class="nav navbar-default"> 
 
     <div class="tab-panel"> 
 
      <nav> 
 
      <ul> 
 
       <li class="active" name="active"><a ng-click="letter = '[AB]'">A-B</a> 
 
       </li> 
 
       <li class="active" name="active"><a ng-click="letter = '[CD]'">C-D</a> 
 
       </li> 
 
       <li class="active" name="active"><a ng-click="letter = '[EF]'">E-F</a> 
 
       </li> 
 

 

 
      </ul> 
 
      </nav> 
 
     </div> 
 
     </div> 
 
     <div id="no-more-tables"> 
 
     <table class="col-md-12 table-bordered table-condensed cf" ng-show="filteredItems > 0"> 
 
      <thead class="cf"> 
 
      <tr> 
 

 
       <th> 
 
       <center>Name&nbsp; 
 
        <a ng-click="sort_by('first_name');"></a> 
 
       </center> 
 
       </th> 
 

 
      </tr> 
 
      </thead> 
 
      <tbody color="#"> 
 
      <tr ng-repeat="data in filtered = (list | filter:search |orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit |startsWithA:letter |limitTo:entryLimit "> 
 
       <td data-title="Name" class="text-center">{{data.name}}  <a type="button" class="btn btn-xs btn-primary" style="width: 40%;" href="#" data-toggle="modal" data-target="#myModal" >Delete</a> 
 
</td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     <div class="col-md-12" ng-show="filteredItems == 0"> 
 
      <div class="col-md-12"> 
 
      <center> 
 
       <h4>No results found</h4> 
 
      </center> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-12" ng-show="filteredItems > 0"> 
 
      <center> 
 
      <div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="&laquo;" next-text="&raquo;"></div> 
 
      </center> 
 
     </div> 
 
     <div id="myModal" class="modal fade"> 
 
\t \t  <div class="modal-dialog"> 
 
\t \t   <div class="modal-content"> 
 
\t \t    <div class="modal-header"> 
 
\t \t     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
 
\t \t     <h4 class="modal-title">Delete Student</h4> 
 
\t \t    </div> 
 
\t \t    <div class="modal-body"> 
 
\t \t     <p>Do you want to delete this student?</p> 
 
\t \t    </div> 
 
\t \t    <div class="modal-footer"> 
 
\t \t     <button type="button" class="btn btn-default" data-dismiss="modal">No</button> 
 
\t \t     <button type="button" class="btn btn-primary" href="<?php echo base_url(); ?>index.php/students/edit/studentform/{{data.id}}" >Yes</button> 
 
\t \t    </div> 
 
\t \t   </div> 
 
\t \t  </div> 
 
\t \t  </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

首先，我會建議使用$http service，或者類似的，用於除去記錄。另外，您會注意到，我通過使用控制器作爲語法對控制器的組織方式進行了更改，並將所有內容都分配給控制器，而不是範圍。通過這種方式，您可以更輕鬆地將控制器範圍傳遞給指令等。

這個想法是，您保留所選項目的ID，以便您可以稍後在觸發服務器刪除操作時使用它。 這可以通過許多不同的方式完成，這只是其中一種方式。

希望這會有所幫助。

var app = angular.module('app', ['ui.bootstrap']); 
 

 
    var student = [{ 
 
     id: 0, 
 
     name: 'Andrew' 
 
    }, { 
 
     id: 1, 
 
     name: 'Butler' 
 
    }, { 
 
     id: 2, 
 
     name: 'Cameron' 
 
    }, { 
 
     id: 3, 
 
     name: 'Delo' 
 
    }, { 
 
     id: 4, 
 
     name: 'Emman' 
 
    }, { 
 
     id: 5, 
 
     name: 'Ferbs' 
 
    }]; 
 

 
    app.filter('startFrom', function() { 
 
     return function(input, start) { 
 
      if (input) { 
 
       start = +start; //parse to int 
 
       return input.slice(start); 
 
      } 
 
      return []; 
 
     } 
 
    }); 
 

 
    app.controller('customersCtrl', function($http, $timeout) { 
 

 
     var vm = this, 
 
      itemId = null; 
 

 
     /** 
 
     * Store a selected item's ID 
 
     * @param id 
 
     */ 
 
     vm.getItemId = function (id) { 
 
      itemId = id; 
 
     }; 
 

 
     /** 
 
     * Remove the selected item from the list 
 
     */ 
 
     vm.deleteItemFunction = function() { 
 
      console.log('remove', itemId); 
 

 
      // And then something like this 
 
      $http.delete('/students/edit/studentform/' + itemId).success(function() { 
 
       console.log('successfully removed'); 
 
      }); 
 
     }; 
 

 

 

 
     
 
     
 
     
 
     
 

 
     vm.list = student; 
 
     vm.currentPage = 1; //current page 
 
     vm.entryLimit = 10; //max no of items to display in a page 
 
     vm.filteredItems = vm.list.length; //Initially for no filter 
 
     vm.totalItems = vm.list.length; 
 

 
     vm.setPage = function(pageNo) { 
 
      vm.currentPage = pageNo; 
 
     }; 
 

 
     vm.filter = function() { 
 
      $timeout(function() { 
 
       vm.filteredItems = vm.filtered.length; 
 
      }, 10); 
 
     }; 
 

 

 
     vm.sort_by = function(predicate) { 
 
      vm.predicate = predicate; 
 
      vm.reverse = !vm.reverse; 
 
     }; 
 
    }); 
 

 
    app.filter('startsWithA', function() { 
 
     return function(items, letter) { 
 
      console.log(items, letter) 
 
      var filtered = []; 
 
      var letterMatch = new RegExp(letter, 'i'); 
 
      for (var i = 0; i < items.length; i++) { 
 
       var item = items[i]; 
 
       if (letterMatch.test(item.name.substring(0, 1))) { 
 
        filtered.push(item); 
 
       } 
 
      } 
 
      console.log(filtered); 
 
      return filtered; 
 
     }; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script> 
 

 
<div ng-app="app"> 
 
    <div class="container" ng-controller="customersCtrl as customer"> 
 
     <div class="row"> 
 
      <div class="col-12"> 
 
       <h2 id="titleHead"><center>Student List</center></h2> 
 
      </div> 
 
      <div class="option-panel"> 
 
       <div class="col-sm-3 col-md-3 pull-right"> 
 
        <form class="navbar-form"> 
 
         <div class="input-group"> 
 
          <input type="text" ng-model="search" ng-click="customer.filter()" placeholder="Search student" class="form-control" placeholder="Search" name="search"> 
 
         </div> 
 
        </form> 
 
       </div> 
 
      </div> 
 
      <div class="nav navbar-default"> 
 
       <div class="tab-panel"> 
 
        <nav> 
 
         <ul> 
 
          <li class="active" name="active"><a ng-click="letter = '[AB]'">A-B</a> 
 
          </li> 
 
          <li class="active" name="active"><a ng-click="letter = '[CD]'">C-D</a> 
 
          </li> 
 
          <li class="active" name="active"><a ng-click="letter = '[EF]'">E-F</a> 
 
          </li> 
 

 

 
         </ul> 
 
        </nav> 
 
       </div> 
 
      </div> 
 
      <div id="no-more-tables"> 
 
       <table class="col-md-12 table-bordered table-condensed cf" ng-show="customer.filteredItems > 0"> 
 
        <thead class="cf"> 
 
        <tr> 
 

 
         <th> 
 
          <center>Name&nbsp; 
 
           <a ng-click="customer.sort_by('first_name');"></a> 
 
          </center> 
 
         </th> 
 

 
        </tr> 
 
        </thead> 
 
        <tbody color="#"> 
 
        <tr ng-repeat="data in filtered = (customer.list | filter:search |orderBy : customer.predicate : customer.reverse) | startFrom:(customer.currentPage-1)* customer.entryLimit |startsWithA:letter |limitTo: customer.entryLimit "> 
 
         <td data-title="Name" class="text-center"> 
 
          {{data.name}}  
 
          <a type="button" class="btn btn-xs btn-primary" style="width: 40%;" href="#" ng-click="customer.getItemId(data.id)" data-toggle="modal" data-target="#myModal">Delete</a> 
 
         </td> 
 
        </tr> 
 
        </tbody> 
 
       </table> 
 
       <div class="col-md-12" ng-show="customer.filteredItems == 0"> 
 
        <div class="col-md-12"> 
 
         <center> 
 
          <h4>No results found</h4> 
 
         </center> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-12" ng-show="customer.filteredItems > 0"> 
 
        <center> 
 
         <div pagination="" page="customer.currentPage" on-select-page="customer.setPage(page)" boundary-links="true" total-items="customer.filteredItems" items-per-page="customer.entryLimit" class="pagination-small" previous-text="&laquo;" next-text="&raquo;"></div> 
 
        </center> 
 
       </div> 
 

 
       <div id="myModal" class="modal fade"> 
 
        <div class="modal-dialog"> 
 
         <div class="modal-content"> 
 
          <div class="modal-header"> 
 
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
 
           <h4 class="modal-title">Delete Student</h4> 
 
          </div> 
 
          <div class="modal-body"> 
 
           <p>Do you want to delete this student?</p> 
 
          </div> 
 
          <div class="modal-footer"> 
 
           <button type="button" class="btn btn-default" data-dismiss="modal">No</button> 
 
           <button type="button" class="btn btn-primary" ng-click="customer.deleteItemFunction()">Yes</button> 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>