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>

我是Angular的新手。我来自jquery。我想以某种方式循环我的vm.pictures数组。在我的html控制器范围中，我想进行循环并在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>

循环遍历数组以将图像添加到DOM

2 个答案: