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.

Answer 1

你可以使用ng-repeat东西，比如vm.pictures

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

Answer 2

如果您想提高性能，也可以通过这种方式实现

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

Loop through array to add images to DOM

Question

2 answers

solution1
2 ACCPTED 2017-06-11 02:50:42

solution2
1 2017-06-12 07:48:55

Loop through array to add images to DOM

Question

2 answers

solution1 2 ACCPTED 2017-06-11 02:50:42

solution2 1 2017-06-12 07:48:55

solution1
2 ACCPTED 2017-06-11 02:50:42

solution2
1 2017-06-12 07:48:55