Loop through array to add images to DOM

Question

var myApp = angular.module('myApp', []);

myApp.controller('ng-angular-pictures', function() {
  console.log('inside of container');
  var vm = this;
  vm.pictures = ['images/acapulco_2.jpg', 'images/acapulco.jpg', 'images/Chihuahua_sitting.jpg'];


  console.log(vm.pictures);

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>angular-weekend-4-challenge</title>
  <link rel="stylesheet" href="styles/style.css">
  <script src="vendors/angular.min.js" charset="utf-8"></script>
  <script src="scripts/script.js" charset="utf-8"></script>
</head>

<body ng-app='myApp'>
  <h1>angular-weekend-4-challenge</h1>
  <div class="container" ng-controller='ng-angular-pictures as ai'>


  </div>
</body>

</html>

I am new to Angular. I come from jquery. I want to somehow loop through my vm.pictures array. In my html controller scope, I want to do the looping and show my pictures in the DOM.

abdoutelb · Accepted Answer · 2017-06-11 02:56:44Z

2

you can use ng-repeat something like vm.pictures

<div ng-repeat="pic in ai.pictures"><img ng-src="{{pic}}"/></div>

edited Jun 11, 2017 at 2:56

answered Jun 11, 2017 at 2:50

abdoutelb

1,0631 gold badge15 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Moises Miguel Over a year ago

Well it did loop trough my array and added the 3 images on the DOM. It didn't work at first, but i changed vm.pictures to ai.pictures, but the images arent showing in the dom. It is just the squares

Moises Miguel Over a year ago

here do i do that @Abdoutelb

Fritters · Accepted Answer · 2017-06-12 08:16:45Z

1

You can also achieve it this way if you want to boost performance

<div ng-repeat="pic in ::ai.pictures track by $index"><img ng-src="{{::pic}}"/></div>

edited Jun 12, 2017 at 8:16

Fritters

7,64410 gold badges48 silver badges66 bronze badges

answered Jun 12, 2017 at 7:48

Nainish Modi

4882 silver badges10 bronze badges

Collectives™ on Stack Overflow

Loop through array to add images to DOM

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related