このシンプルなショッピングカートにモーダルを挿入する方法

Question

私は多くのチュートリアルを試しましたが、私のコードで何が間違っているのかはまだわかりません。私はモーダルを挿入できません。製品名のボタンをクリックするとモーダルになります。 app.js

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 

    $scope.picker= [ 
       {product:'Black Tie', price:12.25 , qty:0 , img:'c_blacktie.png'}, 
       {product:'Brunette', price:11.25 , qty:0 , img:'c_brunette.png'}, 
       {product:'Caramel Apple Cheesecake', price:11.25 , qty:0 , img:'c_caramelapple.png'}, 
       {product:'Caramel by the Sea', price:11.25 , qty:0 , img:'c_caramelbythesea.png'}, 
       {product:'Cookies and Cream Cheesecake', price:11.25 , qty:0 , img:'c_cccheesecake.png'}, 
       {product:'Chocolate Cookie Monster ', price:11.25 , qty:0 , img:'c_chocolatecookiemonster.png'}, 
       {product:'Coco Bliss', price:11.25 , qty:0 , img:'c_cocobliss.png'}, 
       {product:'Oh Crumbs', price:11.25 , qty:0 , img:'c_ohcrumbs.png'}, 
       {product:'Red Velvet', price:11.25 , qty:0 , img:'c_marilyn.png'}, 
       {product:'The Bunny Hop', price:11.25 , qty:0 , img:'c_thebunnyhop.png'}, 
       {product:'Triple Chocolate Meltdown', price:11.25 , qty:0 , img:'c_triplechocolatemeltdown.png'}, 
       {product:'Smores', price:11.25 , qty:0 , img:'c_smores.png'}, 

      ]; 



    $scope.total = function() { 
    var total = 0; 
    angular.forEach($scope.picker, function(products) { 
     total += products.price * products.qty; 
    }) 

    return total; 
}; 

$scope.onTextClick = function ($event) { 
    $event.target.select(); 
}; 
$scope.test = function(text) { 
    var content = document.getElementById("one").innerText; 
    alert(content + "\nTotal account balance"); 
}; 
$scope.orderByMe = function(products){ 
     $scope.myOrderBy = products; 
    }; 
});var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 

    $scope.picker= [ 
       {product:'Black Tie', price:12.25 , qty:0 , img:'c_blacktie.png'}, 
       {product:'Brunette', price:11.25 , qty:0 , img:'c_brunette.png'}, 
       {product:'Caramel Apple Cheesecake', price:11.25 , qty:0 , img:'c_caramelapple.png'}, 
       {product:'Caramel by the Sea', price:11.25 , qty:0 , img:'c_caramelbythesea.png'}, 
       {product:'Cookies and Cream Cheesecake', price:11.25 , qty:0 , img:'c_cccheesecake.png'}, 
       {product:'Chocolate Cookie Monster ', price:11.25 , qty:0 , img:'c_chocolatecookiemonster.png'}, 
       {product:'Coco Bliss', price:11.25 , qty:0 , img:'c_cocobliss.png'}, 
       {product:'Oh Crumbs', price:11.25 , qty:0 , img:'c_ohcrumbs.png'}, 
       {product:'Red Velvet', price:11.25 , qty:0 , img:'c_marilyn.png'}, 
       {product:'The Bunny Hop', price:11.25 , qty:0 , img:'c_thebunnyhop.png'}, 
       {product:'Triple Chocolate Meltdown', price:11.25 , qty:0 , img:'c_triplechocolatemeltdown.png'}, 
       {product:'Smores', price:11.25 , qty:0 , img:'c_smores.png'}, 

      ]; 



    $scope.total = function() { 
    var total = 0; 
    angular.forEach($scope.picker, function(products) { 
     total += products.price * products.qty; 
    }) 

    return total; 
}; 

$scope.onTextClick = function ($event) { 
    $event.target.select(); 
}; 
$scope.test = function(text) { 
    var content = document.getElementById("one").innerText; 
    alert(content + "\nTotal account balance"); 
}; 
$scope.orderByMe = function(products){ 
     $scope.myOrderBy = products; 
    }; 
}); 

内のindex.html

<td ><img ng-src="{{'img/' + products.img}}"/></td> 
    <td><button class="btn btn-default" ng-click="open(customer)">{{ products.product }}</button></td> 
    <td> 

で

私はモーダルコードを入れてみましたが、私はそれを行うとき、それは動作しません。

Answer 1

<td><img ng-src="{{'img/' + products.img}}"/></td> 
    <td> 
     <button class="btn btn-default" data-toggle="modal" data-target="#modalProductDisplay" ng-click="clickedProduct(products)"> 
     {{ products.product }} 
     </button> 
    </td> 

あなたは、コントローラの範囲内で欲しい、これまで以下のモーダルどこ

<div class="modal fade" id="modalProductDisplay" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title"> your title</h4> 
      </div> 
      <div class="modal-body"> 
      your message 
       <h1>{{selectedProduct}}</h1> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

があなたのコントローラ

$scope.clickedProduct=function(products){ 

    $scope.selectedProduct=products.product; 

}