Question

我想在div中使用ng-repeat，如下所示：

<li ng-repeat="image in HomeCtrl.images.data" >
    <a ng-href="@{{ image.code }}"><img ng-src="@{{ image.url }}" ></a>
</li>

这是图像数组：

{
  "data": {
    "url": [
      "https://url1.com",
      "https://url2.com"
    ],
    "code": [
      "3cs14vs4",
      "512631va"
    ]
  }
}

图像数组位于HomeCtrl

中

Answer 1

您应该在已分配给控制器的视图中执行此操作，如果您在不同的控制器中，您可以执行以下操作：

<ul ng-conroller="HomeCtrl">
  <li ng-repeat="image in images.data.url track by $index" >
    <a ng-href="{{ images.data.code[$index] }}">
       <img ng-src="{{ image.data.url[$index] }}" >
    </a>
  </li>
</ul>

请注意，元素的顺序应该是同步的

除了您的问题，我认为更好的数据结构应该如下：

{
 {"code": "xx", "url": "yyy"},
 {"code": "xx", "url": "yyy"},
 {"code": "xx", "url": "yyy"},
 ....
}

Answer 2

请查看以下工作片段。

(function(angular) {
  'use strict';
angular.module('app', [])
  .controller('ExampleController', ['$scope', function($scope) {
    //Change your Json Object
    $scope.images = { 
   "data":[
     {"url":  "https://url1.com","code":"3cs14vs4"},
     {"url":  "https://url2.com","code":"512631va"}
   ],
}  
    
    
    
 }]);
})(window.angular);

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
  
</head>
<body ng-app="app">
  <div ng-controller="ExampleController">  
  
 <ul>
 <li ng-repeat="image in images.data" >
    <a ng-href="{{ image.code }}"><img ng-src="{{ image.url }}" ></a>
</li>
</ul>
    
</div>
</body>
</html>

注意：已经更改了对象数据结构。

AngularJS ng-repeat在二维数组中

2 个答案: