如何使用bootstrap模式删除列表中的数据？

Question

我只是想使用bootstrap模式删除表中的数据，但似乎很难找到正确的方法来执行此操作，这是我的示例代码。在我的模态中，我有一个用于删除数据的href代码 ，它在模态之外工作。我只是想知道任何解决方案使这个工作。感谢。

＆＃13;

＆＃13;

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;
  };
});

＆＃13;

<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">
		    <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" href="<?php echo base_url(); ?>index.php/students/edit/studentform/{{data.id}}" >Yes</button>
		            </div>
		        </div>
		    </div>
		    </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

首先，我建议使用$http service或类似方法删除记录。此外，您会注意到我使用控制器作为语法更改了控制器的组织方式，并将所有内容分配给控制器，而不是范围。这样你就可以更容易地将控制器范围传递给指令。

您的想法是保留所选项目的ID，以便以后在触发服务器删除操作时使用它。 这可以通过许多不同的方式完成，这只是其中一种方式。

希望这有帮助。

＆＃13;

＆＃13;

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;
        };
    });

＆＃13;

    <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>

＆＃13;

＆＃13;

＆＃13;