javascript - 如何在 Angular JS 中添加图像

标签 javascript jquery html angularjs

我是 Angular JS 新手。

我遇到了一个问题。我正在使用 json 来存储数据,但不确定如何在代码中添加图像

<div ng-controller="myCtrl" class="container">

    <div class="col-md-8">

        <div ng-repeat="item in products" class="product col-md-4">

            <h3>{{item.title}}</h3>
            <img ng-src="{{item.Image}}" alt="..." class="img-thumbnail">
            <p>
                <br>
                <button type="button" ng-click="show = !show"  class="btn btn-success">View Product</button>
                <button type="button" ng-click="add_to_cart()" class="btn btn-danger">Add To Cart</button>
                <br>
                <span><b style="color: #ff0000">Size: </b> {{item.Size}} </span>
                <span><b style="color: #ff0000">for: </b> {{item.Gender}} </span> 
                <br>
            </p>
            <div class="description" ng-show="show">{{item.description}}</div>
        </div>
    </div>
    <div class="col-md-4">
        <div id="cart" class="col-md-12">
            <div id="cart_content" class="">
            <h4>Cart:</h4>
                <table id="test" class="table table-striped table-bordered">
                    <tr class="tr">
                        <th>Number</th>
                        <th>Title</th>
                        <th>Qty</th>
                        <th>Cost</th>
                        <th>Total</th>
                        <th></th>
                    </tr>
                    <tr class="tr" ng-repeat="pro in product">
                        <input type="hidden" name="someData" ng-value="{{pro.id}}" /> {{pro.id}}
                        <!-- <span style="display: none;">{{pro.id}}</span> -->
                        <td>{{pro.count}}</td>
                        <td>{{pro.title}}</td>
                        <td>{{pro.qty}}</td>
                        <td>{{pro.cost}}</td>
                        <td>{{pro.total}}</td>

                        <td>[<a href ng:click="removeItem($index)">X</a>]</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
    var app = angular.module("myApp", []);

    app.controller('myCtrl', ['$scope', '$http', function($scope, $http) {

        $http.get('json/products.json').success(function(data) {

                $scope.products = data; // get data from json       
        });

        var total = 0;
        var counter = 0;
        $scope.product = [];

        $scope.add_to_cart = function(){

            counter++;

            total = parseInt(total) + parseInt(this.item.price);

            $scope.product.push({
                id: this.item.id,
                qty: 1,
                title: this.item.title,
                cost: this.item.price,  
                total: total,
                count: counter
            });         
        }

        $scope.removeItem = function(index) {
            $scope.product.splice(index, 1);
        }

    }]);
</script>

最佳答案

你已经做得对了。只需确保 item.Image 指向正确的图像源即可。查看 products.json 内部以调整路径。

关于javascript - 如何在 Angular JS 中添加图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34826083/

相关文章:

javascript - 如何在 javaScript 对象中保存 DOM 元素?我想通过更新对象来更新页面

php - $_POST 中没有任何内容。我的代码有问题吗?

javascript - Photoshop Javascript : How to Change the brush Mode with javascript?

javascript - 修改iframe属性

javascript - jQuery 表格图像

javascript - 如何在js中解析json?

JavaScript 使用 FormData 和 jQuery 的 ajax 上传文件在 iOS 上没有选择文件时返回错误 500

html - Django 表单在字段前添加元素?

html - 将 <body> 中的 &lt;style&gt; 标记与其他 HTML 一起使用

html - 将元素添加到页面底部