Question

这是我的plunker链接： https://plnkr.co/edit/oo05d6H6AxuJGXBAUQvr?p=preview

我正在尝试开发一个应用程序，其中我在数组中包含元素。当我点击每个元素时，将显示细节，但我无法显示图像，

如何在数组中添加图像属性并使用html页面再次显示它？

的script.js：

var app = angular.module("myApp", ["ngRoute"]);
app.controller('mobileController', function($scope) {
    $scope.items = [{
        name: 'Iphone',price:70000,rating:'*****',image: 'how to add image here'
    }, {
        name: 'Oneplus',price:60000,rating:'****',image: 'how to add image here'
    }, {
        name: 'Samsung',price:50000,rating:'***',image: 'how to add image here'
    }, {
        name: 'Sony',price:40000,rating:'***',image: 'how to add image here'
    }, {
        name: 'Moto',price:20000,rating:'****',image: 'how to add image here'
    }];
});

app.config(function($routeProvider) {
    $routeProvider
      .when('/item/:itemName/:itemPrice/:itemRating/:itemImage', {
          templateUrl: 'details.html',
          controller: 'ItemCtrl'
      });
});

app.controller('ItemCtrl', ['$scope', '$routeParams',
  function($scope, $routeParams) {
      $scope.itemName = $routeParams.itemName;
      $scope.itemPrice = $routeParams.itemPrice;
      $scope.itemRating = $routeParams.itemRating;
      $scope.itemImage = $routeParams.itemImage;
  }
]);

的index.html

<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
    <script src="script.js"></script>
    <body ng-app="myApp" ng-controller="mobileController">
        <h2> Welcome to Mobile Store</h2>
        <p>Search:<input type="text" ng-model="test"></p>
        <ul>
            <li ng-repeat="item in items|filter:test">
                <a href="#/item/{{item.name}}/{{item.price}}/{{item.rating}}/{{item.image}}">{{ item.name }}</a>
            </li>
        </ul>
        <div ng-view></div>
    </body>
</html>

details.html

<p>ItemName: {{itemName}}</p>
<p> ItemPrice: {{itemPrice}}</p>
<p>ItemRating:{{itemRating}}</p>
<p>{{itemImage}}</p>

Answer 1

添加图像的更好方法是在angularjs.e.g中使用ng-src。您可以为图像提供相对路径。我的图片位于内容文件夹'./content/Images/T1_1.jpg'和您的html添加中 <img ng-src="{{item.imageSrc}}" alt="{{item.p_variation}}">

Answer 2

您的detail.html更改为如下所示..

<p>ItemName: {{itemName}}</p>
<p> ItemPrice: {{itemPrice}}</p>
 <p>ItemRating:{{itemRating}}</p>
  <img ng-src="itemImage">

Answer 3

对您的details.html和script.js进行一些小改动 -

<强>的script.js

  app.controller('mobileController', function($scope) {
  $scope.items = [{
    name: 'Iphone',price:70000,rating:'*****',image: 'www.w3schools.com/css/trolltunga.jpg'
  }, {
    name: 'Oneplus',price:60000,rating:'****',image: 'path/to/imgresource'
  }];
});

<强> details.html

<p>ItemName: {{itemName}}</p>
<p> ItemPrice: {{itemPrice}}</p>
<p>ItemRating:{{itemRating}}</p>
<img ng-src="{{item.image}}" alt="some text">

注意：应从本地服务器访问图像。对于前 -

http://localhost:8080/img/foo.png

Answer 4

我不认为您尝试这样做的方式是可能的，因为您的图像路径也会有/。

看看这个工作的plunkr。 https://plnkr.co/edit/rCO96V?p=preview

仅传递名称或某个ID

 <li ng-repeat="item in items|filter:test"><a href="#/item/{{item.name}}">{{ item.name }}</a>

然后

angular.forEach($scope.items, function(item) {
     if(item.name==$routeParams.itemName){
          $scope.itemName = item.name;
          $scope.itemPrice = item.price;
          $scope.itemRating = item.rating;
          $scope.itemImage = item.image;
    }
});

如何在角度中添加数组内的图像？

4 个答案: