Question

我想传递一个值/ id到bootstrap模式，之后从模态我希望将值传递给angularjs以通过php删除我的HTML代码

<tr dir-paginate="product in products">
    <td>{{product.NUMBER}}</td>
    <td>{{product.COMPANY}}</td>
    <td>
        <ul class="dropdown-menu">
          <li>
              <a href="#" ng-click="editCard(product.NUMBER,product.COMPANY)"class="btn-update" class="btn btn-info" data-toggle="collapse" data-target="#show-form">Update</a>
          </li>
          <li><a href="#" class="btn-delete" data-toggle="modal" data-target="#myModal" ng-click="deleteCardInfo(product.NUMBER)">Delete</a></li>
        </ul>
    </td>
</tr>

我的模态代码

<div class="container">
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Want to delete</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Delete</button>
        </div>
      </div>

    </div>
  </div>
</div>

我的angularjs代码

$scope.deleteproductInfo=function(product){
        $http.post("cdelete.php",{'product':product})
        .success(function(datasuccess){
                    $scope.Status = datasuccess.Status;
                    $scope.cardDisplay();
                });
    };

Answer 1

为此目的使用额外功能。激活模态并将所需参数设置为全局变量时，将调用该函数。然后，全局范围的值保留用于第二个操作。

Answer 2

我建议您使用angular-ui#modal。

使用起来非常简单，请看一下：

(function() {
  'use strict';

  angular
    .module('app', ['ui.bootstrap'])
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope', '$uibModal'];

  function MainCtrl($scope, $uibModal) {
    $scope.deleteModal = deleteModal;
    $scope.products = [];

    for (var i = 0; i < 20; i++) {
      $scope.products.push({
        "NUMBER": Math.floor(Math.random() * 500) + 1,
        "COMPANY": "COMPANY " + Math.floor(Math.random() * 500) + 1
      });
    }

    function deleteModal(product) {
      $uibModal.open({
        templateUrl: 'modal.html',
        controller: ['$scope', '$uibModalInstance', 'products', 'product', DeleteModalCtrl],
        resolve: {
          products: function() {
            return $scope.products
          },
          product: function() {
            return product;
          }
        }
      });
    }
  }

  function DeleteModalCtrl($scope, $uibModalInstance, products, product) {
    $scope.product = product;
    $scope.deleteProduct = deleteProduct;

    function deleteProduct() {
     /*$http.post("cdelete.php", {
        'product': product
      })
      .then(function(response) {
        $scope.Status = response.Status;
        $scope.cardDisplay();
      });*/
      products.splice(products.indexOf(product), 1);
      $uibModalInstance.close();
    }
  }
})();

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.0/ui-bootstrap-tpls.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="MainCtrl">
  <script type="text/ng-template" id="modal.html">
    <div class="modal-header">
      <h3 class="modal-title" ng-bind-template="Delete {{ product.NUMBER }}?"></h3>
    </div>
    <div class="modal-body">
      <span ng-bind-template="Are you sure you want to delete {{ product.NUMBER }}?"></span>
    </div>
    <div class="modal-footer">
      <button class="btn btn-danger" ng-click="deleteProduct()">Delete</button>
      <button class="btn" ng-click="$close()">Cancel</button>
    </div>
  </script>

  <table class="table table-hover">
    <tr ng-repeat="product in products">
      <td ng-bind="product.NUMBER"></td>
      <td ng-bind="product.COMPANY"></td>
      <td>
        <button type="button" class="btn btn-sm btn-primary" ng-click="editProduct(product)">Update</button>
        <button type="button" class="btn btn-sm btn-danger" ng-click="deleteModal(product)">Delete</button>
      </td>
    </tr>
  </table>
</body>

</html>

我希望它有所帮助。

AngularJs从引导模式

2 个答案: