CODEWITHSUNDEEP
angularjs
dev333
dev333

Reputation: 799

How to load image and text of that image paralelly into a div using angularjs

Actually,I'm able to load 3 images(open,new&save icons) into a div using angularjs.Now,I'm trying to place the related text of those images into the same div just below those 3 images.

Like,"open" text should be written just below "open" image.Simialrly,for the remaining images too.How can I achieve this?

Can anyone please help me out regarding this issue ...

My js code:

angular.module('Sample', []).controller('Home', function($scope) {

    $scope.imageSources = [];
    $scope.imageSources.push('images/open.png');
    $scope.imageSources.push('images/new.jpg');
    $scope.imageSources.push('images/save.png');

});

My html code:

<div style="margin-top: 15px;">
                    <img width=40 height=50 style="margin-left: 12px;"
                        ng-repeat="imageSource in imageSources track by $index"
                        ng-src="{{imageSource}}"> </img>
                </div>

Upvotes: 0

Views: 946

Answers (1)

Christos Baziotis
Christos Baziotis

Reputation: 6035

This will work but is not the right way to do it. I leave the styling up to you.

View:

  <div style="margin-top: 15px;" ng-repeat="imageSource in imageSources">
    <img width=40 height=50 style="margin-left: 12px;" ng-src="{{imageSource}}" />
    <br>
    <span style="margin-left: 12px;">{{getFilenameFromPath(imageSource)}}</span>
  </div>

Controller:

 $scope.imageSources = [];
  $scope.imageSources.push('images/open.png');
  $scope.imageSources.push('images/new.jpg');
  $scope.imageSources.push('images/save.png');


  $scope.getFilenameFromPath = function(filename) {
    return filename.split("/")[1].split(".")[0];
  }

Here is a jsfiddle.

The right way as it has been mentioned in the contents, is to have a collection of object and each objects should have a name and a src property. In your case you should do:

$scope.imageSources = [];
  $scope.imageSources.push({
    name:"open",
    src: "images/open.png"
  });
  $scope.imageSources.push({
    name:"new",
    src: "images/new.png"
  });
  $scope.imageSources.push({
    name:"save",
    src: "images/save.png"
  });

So you will end up with this collection:

[
  {
    "name": "open",
    "src": "images/open.png"
  },
  {
    "name": "new",
    "src": "images/new.png"
  },
  {
    "name": "save",
    "src": "images/save.png"
  }
]

Here is an jsfiddle.

Upvotes: 1

Related Questions