CODEWITHSUNDEEP
angularjs
Non
Non

Reputation: 8589

Displaying an specific image for each item in ng-repeat

I have an ng-repeat which shows a list of sports and next to every sport name I'd like to display an specific image. I'd like to know how to go about displaying the correct png for every sport. How could I make it know what image to display? Here's how the code looks like.

<div ng-if="sport.leagues.length && sport.checked"
      ng-repeat="sport in sports">
      <ion-list class="list">
        <div class="item">
          <img src="" class="sport-image"> <!--Heres where img shoud be-->
          <span>{{sport.name}}</span>
        </div>
      </ion-list>
</div>

Upvotes: 0

Views: 3050

Answers (4)

trees_are_great
trees_are_great

Reputation: 3911

<img ng-src="http://www.gravatar.com/avatar/{{sport.imageLocation}}" class="sport-image"/>

Ref: https://docs.angularjs.org/api/ng/directive/ngSrc

Upvotes: 0

Steven Keith
Steven Keith

Reputation: 1799

You should create an object property for the image:

// HTML

<div ng-app="myApp" ng-controller="MyCtrl">
    <div ng-if="sport.leagues.length && sport.checked"
      ng-repeat="sport in sports">
        <div class="item">
            <img width="30" height="30" src="{{ sport.im }}" class="sport-image"> <!--Heres where img shoud be-->
            <span>{{sport.name}}</span>
        </div>
    </div>
</div>

// JS

angular.module('myApp',[])
  .controller('MyCtrl', function($scope) {    

    $scope.sport = {
        leagues: ['premier', 'championship'],
        checked: true
    };

    $scope.sports = [
        {
            name: 'soccer', 
            im: 'http://upload.wikimedia.org/wikipedia/en/e/ec/Soccer_ball.svg'
        },
        {
            name: 'basketball',
            im: 'http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png'
        }
    ];
});

See this fiddle: http://jsfiddle.net/uxu21n4v/1/

Upvotes: 1

Mik378
Mik378

Reputation: 22171

You should use ng-src instead of src, so that you can pass the variable into it representing the current image to display, without risking an error 404 while the angular expression isn't parsed yet:

<img ng-src="{{sport.image}}" />

In JS part, you would merely have in your controller a kind of: 

$scope.sport = {image: "http://myServer.com/mySuperSportImage.jpg"};

Note that this example doesn't deal with collections to simplify.
This ensures the binding.

Upvotes: 1

ptwo
ptwo

Reputation: 460

I am supposing you want the image based on a key (like sport name). You can maintain a javascript object in your controller with key as name and value can be url of the image

obj = {football:'myurl'}

and use this object as

<div ng-if="sport.leagues.length && sport.checked"
  ng-repeat="sport in sportsFilter = ( sports | sportsFiltered:query )">
  <ion-list show-delete="sport.showStars"
            class="list">
    <div class="item">
      <img ng-src="{{obj[sport.name]}}" class="sport-image"> <!--Heres where img shoud be-->
      <span>{{sport.name}}</span>
    </div>

Upvotes: 1

Related Questions