使用 ng-src

问题描述

我们的任务是尝试使用 ng-src 将图像加载到购物应用程序 pick2get 并使其看起来有吸引力。

我们为此编写了以下代码 -

在 HTML 文件中为 -

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.min.js"></script>
    <script src="index.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
    <div class="topnav">
        <a href="#" style="float:right;font-size:20px"><i>Check out</i></a>
        <a href="#" style="float:right; font-size:20px"><i>Sign In</i></a>
        <a href="#/Home" style="float:left; width:150px;" class="active"><b><i>Pick2get</i></b></a>

    </div>
    <br />
    <div class="search_drop_down">
        <select id="month" class="select select-styled">
            <option value="hide">-- Brand --</option>
            <option ng-repeat="pdtBrand in products">{{pdtBrand.brand}}</option>
        </select>

        <select id="year" class="select select-styled">
            <option value="hide">-- Price --</option>
            <option value="low_price_to_high">Low Price to High</option>
            <option value="hign_price_to_low">High Price to Low</option>
        </select>

        <input class="search" placeholder="Search" size="40" type="text">
    </div>
    <div class="product_Box" ng-repeat="pdt in products">
        <div class="single_1">
            <div class="container">
                <div class="discount">
                    <div class="discount_badge">{{pdt.discount}}</div>
                    <span class="discount_text">discount</span>
                </div><img ng-src={{pdt.image}}></div></div>
        <div class="single_2">
            <div class="prod_desc">
                <span class="pdt_name">{{pdt.name}}</span>
                <div class="pdt_details_2_col">
                    <span class="brand">Brand</span>
                    <span class="brand_name">{{pdt.brand}}</span>
                </div>
                <div class="pdt_details_2_col">
                    <span class="brand">Price</span>
                    <span class="brand_name">{{pdt.price}}</span>
                </div>
            </div>


        </div>
        <div class="single_3">
            <div class="quantity_sec">
                <label>Quantity</label>
                <br>
                <input placeholder="Quantity" type="number" ng-model="pdt.quantity">
            </div>
        </div>
        <div class="single_4">
            <input type="image" src="img/greyCart.png" alt="Submit" width="48" height="48"
                ng-show="pdt.quantity<1?true:false" />
            <input type="image" src="img/orangeCart.png" alt="Submit" width="48" height="48"
                ng-hide="pdt.quantity<1?true:false" ng-click="addToCart();" />
        </div>
    </div>



</body>

</html>

在索引JS中

var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope) {
    $scope.quantity=0;
   //Add image property to the products and the image should have the url of images
    var imgPath = 'img/cycle.jpg'
    $scope.products = [
        {
            name : "Happy Cycle",discount:"20%",price: "2500",brand : "Wheels",addedToCart:false,quantity:0
        },{
            name : "Kids Shoes",discount:"10%",price: "1460",brand : "Feel Good",{
            name : "Polo Baby Care Dress",brand : "Super Hero",]
$scope.addToCart=function(){
    alert('Product Added to Cart successfully')
    return "success";
    }

});

出现错误 -

Node.js (linux; U; rv:v8.15.1): 执行 0 of 1 SUCCESS (0 secs / 0 secs)
1A[2KNode.js (linux; U; rv:v8.15.1) AngularJS 测试控制器应该存在产品图片失败
预期未定义等于 'img/cycle.jpg'.at UserContext.
Node.js (linux; U; rv:v8.15.1)：执行 1 of 1 (1 Failed)

请指出我们哪里出错了

解决方法

产品数组没有图像键..根据 html 代码，它应该是数组的一部分

请将此图像文件添加到数组中，就像您添加了价格其他字段一样..

angular2-directives