AngularJsによるブートストラップモーダルをトリガーし、$ http.postでデータを取得します。

Question

私は各顧客がボタンを持っている顧客のリストを持っています。 AngularJsコントローラがブートストラップモーダルを表示し、$ http.postでデータを要求し、この顧客に関する詳細情報を取得し、モーダル内に情報を表示したいとします。 どうすればこの目的を達成できますか？ このボタン：

<button type='button' class='btn btn-primary btn-sm' 
data-ng-click='moreinfo(customer.id)' >more info</button> 

Answer 1

最初に各顧客情報変数を各情報に渡すことができます。今、あなたは、各行のボタンをクリックすることができ

<!-- Modal start --> 
    <div class='modal fade' id='cinfo' tabindex='-1' role='dialog' 
aria-labelledby='myModalLabel' aria-hidden='true'> 
     <div class='modal-dialog modal-lg' role='document'> 
      <div class='modal-content'> 
       <div class='modal-header'> 
        <button type='button' class='close' data-dismiss='modal'> 
         <span aria-hidden='true'>&times;</span> 
         <span class='sr-only'>Close</span></button> 
         <h4 class='modal-title text-danger' 
         id='myModalLabel'>customer info</h4> 
       </div> 
       <div class='modal-body'> 
        {{customerinfo.firstName}} 
       </div> 
      <div class='modal-footer'> 
       <button type='button' class='btn btn-default' 
      data-dismiss='modal'>close</button> 
      </div> 
     </div> 
    </div> 
    </div> 
    <!-- Modal end --> 

：

<button type='button' class='btn btn-primary btn-sm btnmargin' 
data-toggle='modal' data-target='#cInfo' data-ng-click='moreinfo(customer)' 
>more info</button> 

、あなたは、コントローラの内部で、このコードを記述する必要があります：

$scope.customerinfo=[]; 
$scope.moreinfo= function(customer){ 
      $scope.customerinfo= customer; 
}; 

Htmlのブートストラップモーダルこのような

ボタン詳細情報とモーダルボディの情報を参照してください。

Answer 2

利用ngDialogの代わりに、ブートストラップモーダル。

anglejsで実装するのは簡単ですし、別のコントローラを持つこともできますし、メインページからこのngDialogにデータを確実に転送できます。 https://angular-ui.github.io/bootstrap/

それは基本的にあなたがブートストラップをロードするために使用できる事前定義されたディレクティブのセットです：私はあなたがより多くのJSプラグインを望んでいないことを知っているが、私はあなたがAngularjsのためのUIブートストラップを使用することをお勧め https://github.com/likeastore/ngDialog

Answer 3

成分。あなたのケースでは

、事はそのように終了することができます：あなたのコントローラで

<button type="button" class="btn btn-primary" ng-click = "moreinfo(customer.id)"> More Info </button> 

：

angular.module('myApp').controller('CustomerInfoCtrl',['$uibModalInstance','$scope', function($uibModalInstance,$scope){ 

$scope.moreinfo = function(id){ 
var InfoModal = $uibModalInstance.open({ 
templateUrl : 'route/to/my/template.html, 
controller: 'MoreInfoCtrl', 
scope: $scope, 
resolve: { 
customerId : function(){ 
    return id; 
} 
} 
}); 

InfoModal.result.then(function(){ 
//callback when modal closed 
},function(){ 
//callback when clicked on cancel to dismiss the modal 
}); 

}]); 

は、その後、あなたが別のコントローラを作成し、MoreInfoCtrlを：

angular.module('myApp').controller('MoreInfoCtrl',['$http','$scope','id', function($http, $scope, id){ 

//Do your http call with the variable id (i.e the customer.id) 

}]); 

あなたが持っていますたくさんのオプションがあります。あなたは簡単に変数、スコープを渡すか、コールバックプロセスを行うことができます。 私はプロジェクトでそれをたくさん使っていますが、それは本当に助けになります。 私はそれを試してみることをお勧めします。そして、それは、（上記のリンクから）本当に重いではありません：あなたは良いニュースを選択するいずれの方法

ダウンロードの全体のサイズがかなり小さいこと：122Kは（〜31KBのない テンプレートや98Kですべてのディレクティブのために縮小さgzipで テンプレートと圧縮、および28Kはなしgzip圧縮された）

Answer 4

と私は、UI-ブートストラップで行くことにあなたをお勧めしますが、他の回答を見て、あなたが任意のより多くのJSライブラリ/プラグインに 希望を追加する必要はありません考慮しますこれはあなたを助ける

はあなたがモーダルとして表示したいのdivとディレクティブを使用する必要があります

$scope.moreInfo = function(){ 
    $rootScope.$broadCast('showModal', dataToPassToListener) 
} 

コントローラで

app.directive('bootstrapModal', ['$rootScope', '$http', function ($rootScope, $http) { 
    "use strict"; 
    return { 
     restrict: "A", 
     //add isolated scope if you want 
     //scope: { 
     //}, 
     link: function (scope, element) { 
      scope.$on('showModal', function (event, object) { 
       //fire your ajax here 
       $http.get('url').then(function(response){ 
        //process your response alter DOM and show modal 
        element.modal('toggle'); 
       }); 
      }); 
     } 
    }; 
}]); 

とあなたのMOREINFO機能には、次のようブートストラップモーダルと呼ばれるディレクティブを追加します。単純なbootstrap.jsを使用した場合は、同じdivのようにrole = "dialog"を指定します。