AngularJS NG-重复在二维数组

我想用里面的div NG-重复这样的：AngularJS NG-重复在二维数组

<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

来源

2016-11-29 trying to learn

那么是什么问题，它不工作？你有错误吗？ – styopdev

我没有得到预期的结果，它显示了** ng-src **中的整个代码数组，同样的url –

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

<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"}, 
.... 
}

来源

2016-11-29 13:42:41

就我所见，我应该使用这个数据结构来获得这段代码的工作。谢谢！ –

不客气:) –

请找到以下工作片段。

(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>

注：改变了你的对象的数据结构。

来源

2016-11-29 13:58:04

谢谢你帮助我，我很感激。现在我正在尝试更改PHP中的数据结构。 –

好的！欢迎:) –

AngularJS NG-重复在二维数组

回答

相关问题