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-重複在二維數組

回答

相關問題