Question

目前我正在使用ngCart功能进行角度应用。目前正在显示产品名称，数量，数量。现在我需要为购物车上的每个添加产品添加产品图片。

我无法添加此类内容。

任何帮助将不胜感激。提前谢谢！

Answer 1

我从未使用过ngCart，但这里是根据文档和一些测试的解决方案：

首先，您需要添加“自定义”数据（在您的情况下为图片），这是默认的购物车项目：

<ngcart-addtocart id="item1" name="My Item #1" price="10.99" quantity="1" quantity-max="5">Add to Cart</ngcart-addtocart>

现在使用“data”属性添加自定义数据，因此您的项目现在将如下所示：

<ngcart-addtocart id="item1" name="My Item #1" price="10.99" quantity="1" quantity-max="5" data="{picture: 'http://placehold.it/350x150'}">Add to Cart</ngcart-addtocart>

然后您需要编辑购物车摘要，默认情况下应如下所示：

<div class="table-responsive col-lg-12" ng-show="ngCart.getTotalItems() > 0">

    <table class="table table-striped ngCart cart">

        <thead>
        <tr>
            <th></th>
            <th></th>
            <th>Quantity</th>
            <th>Amount</th>
            <th>Total</th>
        </tr>
        </thead>
        <tfoot>
        <tr ng-show="ngCart.getTax()">
            <td></td>
            <td></td>
            <td>Tax ({{ ngCart.getTaxRate() }}%):</td>
            <td>{{ ngCart.getTax() | currency }}</td>
        </tr>
        <tr ng-show="ngCart.getShipping()">
            <td></td>
            <td></td>
            <td></td>
            <td>Shipping:</td>
            <td>{{ ngCart.getShipping() | currency }}</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td>Total:</td>
            <td>{{ ngCart.totalCost() | currency }}</td>
        </tr>
        </tfoot>
        <tbody>
        <tr ng-repeat="item in ngCart.getCart().items track by $index">
            <td><span ng-click="ngCart.removeItemById(item.getId())" class="glyphicon glyphicon-remove"></span></td>

            <td>{{ item.getName() }}</td>
            <td><span class="glyphicon glyphicon-minus" ng-class="{'disabled':item.getQuantity()==1}"
                      ng-click="item.setQuantity(-1, true)"></span>&nbsp;&nbsp;
                {{ item.getQuantity() | number }}&nbsp;&nbsp;
                <span class="glyphicon glyphicon-plus" ng-click="item.setQuantity(1, true)"></span></td>
            <td>{{ item.getPrice() | currency}}</td>
            <td>{{ item.getTotal() | currency }}</td>
        </tr>
        </tbody>
    </table>
</div>

你需要做的是添加一个td（不要忘记添加一个）来使用getData（）函数来获取这样的“自定义”数据：

<td><img src="{{ item.getData().picture }}"/></td>

因此，您的最终购物车摘要将如下所示：

<div class="table-responsive col-lg-12" ng-show="ngCart.getTotalItems() > 0">

    <table class="table table-striped ngCart cart">

        <thead>
        <tr>
            <th></th>
            <th></th>
            <th>Picture</th>
            <th>Quantity</th>
            <th>Amount</th>
            <th>Total</th>
        </tr>
        </thead>
        <tfoot>
        <tr ng-show="ngCart.getTax()">
            <td></td>
            <td></td>
            <td>Tax ({{ ngCart.getTaxRate() }}%):</td>
            <td>{{ ngCart.getTax() | currency }}</td>
        </tr>
        <tr ng-show="ngCart.getShipping()">
            <td></td>
            <td></td>
            <td></td>
            <td>Shipping:</td>
            <td>{{ ngCart.getShipping() | currency }}</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td>Total:</td>
            <td>{{ ngCart.totalCost() | currency }}</td>
        </tr>
        </tfoot>
        <tbody>
        <tr ng-repeat="item in ngCart.getCart().items track by $index">
            <td><span ng-click="ngCart.removeItemById(item.getId())" class="glyphicon glyphicon-remove"></span></td>

            <td>{{ item.getName() }}</td>
            <td><img src="{{ item.getData().picture }}"/></td>
            <td><span class="glyphicon glyphicon-minus" ng-class="{'disabled':item.getQuantity()==1}"
                      ng-click="item.setQuantity(-1, true)"></span>&nbsp;&nbsp;
                {{ item.getQuantity() | number }}&nbsp;&nbsp;
                <span class="glyphicon glyphicon-plus" ng-click="item.setQuantity(1, true)"></span></td>
            <td>{{ item.getPrice() | currency}}</td>
            <td>{{ item.getTotal() | currency }}</td>
        </tr>
        </tbody>
    </table>
</div>

你已经完成了，这已经过测试和工作。

http://jsfiddle.net/ypjrsat0/227/

Angular js加入购物车

1 个答案: