好吧所以我现在有一个模态,但我不知道如何把标题,描述,图像和价格放在模态中..我正在寻找一个解决方案,但他们没有工作......我试着制作数组在所选产品中,但它不起作用(只有描述是有效的)
这是html
<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">×</span></button>
<h5 class="modal-title">Cupcake Description</h5>
</div>
<div class="modal-body">
<h3>{{selectedProduct}}</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
这是app.js中的模态
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.picker= [
{product:'Black Tie', price:75.00 , qty:0 , img:'c_blacktie.png', desc:"Our signature chocolate cupcake with cheesecake baked smack dab into the center and topped with just a dollop of our rich cream cheese frosting. (Price: 75.00)"},
{product:'Brunette', price:50.00 , qty:0 , img:'c_brunette.png', desc:"Our signature chocolate cupcake topped with milk chocolate buttercream. Who says blondes have more fun?"},
{product:'Caramel Apple Cheesecake', price:100.00 , qty:0 , img:'c_caramelapple.png', desc:"Our cinnamon apple cupcake with delectable cheesecake baked inside. Topped with a dollop of caramel cream cheese frosting and a drizzle of caramel sauce."},
{product:'Caramel by the Sea', price:95.00 , qty:0 , img:'c_caramelbythesea.png', desc:"Our signature chocolate cupcake infused with house made salted caramel, topped with rich ganache and fleur de sel."},
{product:'Cookies and Cream Cheesecake', price:110.00 , qty:0 , img:'c_cccheesecake.png', desc:"An entire Oreo cookie on the bottom, cookies and cream cheesecake on top! Dressed up with a dab of fresh whipped cream and crushed Oreo cookie pieces. Yeah, it really is as good as it sounds."},
{product:'Chocolate Cookie Monster ', price:90.00 , qty:0 , img:'c_chocolatecookiemonster.png', desc:"A moist vanilla almond cupcake topped with mouth-watering cookie dough buttercream and colored sugar sprinkles. A taste reminiscent of a frosted holiday sugar cookie!"},
{product:'Coco Bliss', price:60.00 , qty:0 , img:'c_cocobliss.png', desc:"Our decadent coconut cupcake with an almond in the center, topped with coconut cream then dipped in chocolate ganache."},
{product:'Oh Crumbs', price:80.00 , qty:0 , img:'c_ohcrumbs.png', desc:"Our moist Oreo cupcake is topped with vanilla bean buttercream, then takes a ride through crushed Oreo cookie pieces."},
{product:'Red Velvet', price:100.00 , qty:0 , img:'c_marilyn.png', desc:"Buttery and smooth red velvet cupcake dressed in rich cream cheese frosting. “They always said she was a quiet girl."},
{product:'The Bunny Hop', price:50.00 , qty:0 , img:'c_thebunnyhop.png', desc:"A lightly spiced carrot cupcake dressed in rich cream cheese frosting and topped with a little carrot. Silly rabbit, cupcakes are for kids!"},
{product:'Triple Chocolate Meltdown', price:115.00 , qty:0 , img:'c_triplechocolatemeltdown.png', desc:"Our signature chocolate cupcake infused with chocolate ganache, topped with milk chocolate buttercream and sprinkles."},
{product:'Smores', price:85.00 , qty:0 , img:'c_smores.png', desc:"A graham cupcake infused with chocolate ganache, topped whipped marshmallow buttercream, graham crumbs, and a Hershey square garnish."},
];
$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;
};
$scope.clickedProduct=function(products){
$scope.selectedProduct=products.desc;
};
});
现在输出:(我们能够设置标题和价格)但图像无法正常工作..
我们尝试创建另一个模态,然后插入一些代码
<td ><img ng-src="{{'img/' + products.img}}" alt="{{products.product}}"/></td>
<td>
<p>Price:{{priceCupcake}}</p>
<h3>{{selectedProduct}}</h3>
图像不能正常工作..有什么问题?以及如何使alt工作?