How to insert images into a div using angular.js

Question

I'm able to insert one image into a div using angular.js.But unable to insert three images into a div.Can anyone please help me out regarding this issue ...

My js code:

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

  $scope.imageSources = [];

    for (var i = 0; i < 3; i++) {
         $scope.imageSources .push('images/open.jpg');
         $scope.imageSources .push('images/new.jpg');
         $scope.imageSources .push('images/save.jpg');

    }

});

My html code:

<div id="divone" class="subdiv">
                <div>
                <img width=176 height=99 ng-repeat="imageSource in imageSources track by $index" ng-src="{{imageSource }}">
  </img>
                </div>

            </div>

Why do you have a for loop, you're essentially pushing each of those URLs every times, making 9 entries to your array. Also what does the class .subdiv look like? I was able to recreate this with no issue in a codepen. - codepen.io/jusopi/pen/EPNgpz — jusopi
– jusopi, Commented Dec 29, 2015 at 6:07
There was some issue in loading angular.js plugin.I had removed the for loop .Now it's working fine for me — dev333
– dev333, Commented Dec 29, 2015 at 6:11
But I'm getting all the images vertically.But I want to display all the three images horizontally.How can I do this ? — dev333
– dev333, Commented Dec 29, 2015 at 6:16

Shuvro · Accepted Answer · 2015-12-29 06:16:10Z

I don't understand why you are using the for loop. Can you explain?

Check out the following code -

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

  $scope.imageSources = [];

    $scope.imageSources.push('http://www.imageno.com/thumbs/20151223/af9znxap7p6a.jpg');
     $scope.imageSources.push('http://laurencebonvin.com/wp-content/uploads/2015/10/images-3-200x120.jpg');
     $scope.imageSources.push('http://thumbs.photo.net/photo/18041438-sm.jpg');

});

img{
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="Admin">
    <div ng-controller="Home" id="divone" class="subdiv">
      <div>
        <img width=176 height=99 ng-repeat="imageSource in imageSources track by $index" ng-src="{{imageSource }}" />
      </div>
    </div>
  </body>

UPDATE:

And add display: block property to your image for displaying image vertically.

Collectives™ on Stack Overflow

How to insert images into a div using angular.js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related