AngularJs Удалить подтверждение от начальной загрузки модального

Я хочу передать значение/идентификатор для начальной загрузки модального, после чего из модальнога я хочу передать значение angularjs удалить через PHP моего HTML код следующегоAngularJs Удалить подтверждение от начальной загрузки модального

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

источник

2016-07-31 Shimul Chowdhury

Задать вопрос – tam5

Надеюсь, вы используете [угловую версию ui] (https://angular-ui.github.io/bootstrap) модального, который [очень тщательно документирован] (https: // угловой -ui.github.io/bootstrap/#/modal) с примерами передачи данных и получения данных из модального. – Lex

Используйте для этой цели дополнительную функцию. Функция вызывается, когда модальный активируется, а требуемые параметры устанавливаются в глобальную переменную. Тогда значения, используемые для глобальных областей, используются для второго действия.

источник

2016-07-31 18:58:31 nidhin

Я рекомендую вам использовать 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>

Я надеюсь, что это помогает.

источник

2016-07-31 23:38:27 developer033

AngularJs Удалить подтверждение от начальной загрузки модального

ответ

Смежные вопросы