Franchette Franchette - 3 months ago 22
AngularJS Question

how to insert modal in this simple shopping cart

I have tried a lot of tutorials but I still don't get what's wrong with my code.. I can't insert a modal. When you click on the button of the product name it should be a modal.

in 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>


in the 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;
};
});


I tried to put the modal code but when I do that, it doesn't work.

Answer
<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>

Add the below modal where ever you want within the scope of the controller

<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>

add the following to your controller

$scope.clickedProduct=function(products){

    $scope.selectedProduct=products.product;

}

enter image description here