Question

我已经尝试了很多教程，但我仍然没有弄到我的代码有什么问题。我无法插入模态。当您单击产品名称的按钮时，它应该是一个模态。

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>

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

我试图放置模态代码但是当我这样做时，它不起作用。

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;

}

如何在这个简单的购物车中插入模态

1 个答案: