AngularJs從引導模式

刪除確認我想傳遞一個值/ id來引導模式，之後，從模式我想通過價值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

希望您使用[非常詳細記錄]模式的[angular-ui version]（https://angular-ui.github.io/bootstrap）（https：// angular -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從引導模式

回答

相關問題