如何在Modal中输入内容?

时间:2016-08-25 19:03:54

标签: angularjs bootstrap-modal

好吧所以我现在有一个模态,但我不知道如何把标题,描述,图像和价格放在模态中..我正在寻找一个解决方案,但他们没有工作......我试着制作数组在所选产品中,但它不起作用(只有描述是有效的)

这是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">&times;</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;

};
});

现在输出:(我们能够设置标题和价格)但图像无法正常工作..

enter image description here

我们尝试创建另一个模态,然后插入一些代码

    <td ><img ng-src="{{'img/' + products.img}}" alt="{{products.product}}"/></td>
<td>
             <p>Price:{{priceCupcake}}</p>

                <h3>{{selectedProduct}}</h3>

图像不能正常工作..有什么问题?以及如何使alt工作?

0 个答案:

没有答案