CODEWITHSUNDEEP
htmlangularjs
saisree reddy
saisree reddy

Reputation: 81

how to add image inside an array in angular?

Here is my plunker link: https://plnkr.co/edit/oo05d6H6AxuJGXBAUQvr?p=preview

I'm trying to develop an application where I have elements inside an array. When I click on each element details will be displayed, but I'm not able to display image,

How can I add an image attribute inside an array and again display it using html page?

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>

Upvotes: 1

Views: 5635

Answers (5)

Lupita CorreaSalinas
Lupita CorreaSalinas

Reputation: 1

name: 'Iphone',
rating: '*****',
image: ../assets/imagelink.jpg

imagelink is whatever image file is

ex: I have an image called silk-images.png in the array would be

image: ../assets/silk-images.png

in my HTML I had an array for *ngFfor='let stores of store' {{stores.image}}

Upvotes: 0

Olezt
Olezt

Reputation: 1738

I don't think the way you are trying to do it is possible because your image path will also have /.

Have a look at this working plunkr. https://plnkr.co/edit/rCO96V?p=preview

Pass only the name or some id

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

and then 

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

Upvotes: 0

Nitesh Goyal
Nitesh Goyal

Reputation: 586

Make some small changes to your details.html and script.js like this -

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">

Note: Images should be accessed from your local server. For Ex-

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

Upvotes: 0

coderboy_4200
coderboy_4200

Reputation: 53

The better way to add images is to use ng-src in angularjs.e.g.You can give a relative path to your images. My images sit in a content folder './content/Images/T1_1.jpg' and in your html add <img ng-src="{{item.imageSrc}}" alt="{{item.p_variation}}">

Upvotes: 1

Manikandan Velayutham
Manikandan Velayutham

Reputation: 2228

Your detail.html change to like below.. 

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

Upvotes: 0

Related Questions