在同一張表中處理兩個ng-repeat

我有一個保存在var images中的圖像列表，以及保存在var searchName中的名字列表，現在我需要顯示圖像和名字，但是我可以在所有圖像。在同一張表中處理兩個ng-repeat

HTML：

<div class="row col-sm-12" > 
      <table class="displayImg col-sm-3"> 

     <tr ng-repeat = "image in images"> 
     <td><img ng-src="{{image}}" class="imageShow"/> </td>  
     </tr>  
     <tr ng-repeat = "item in searchName"> 
       <td>{{item[0].profileInfo.firstname}} </td> 
       </tr> 
      </table> 
     </div>

來源

2016-12-26 Nicoleta Wilskon

如果圖像和名稱，然後之間的關係，根據您的要求合併兩個數組或試試這個： http://stackoverflow.com/questions/30846032/looping-multiple-arrays-simultaneously-with-ng-repeat –

@Nicoleta - 你可以先準備好合併你的控制器上的數據如果圖像和項目之間有關係，你也可以嘗試使用ng-repeat-start，ng-repeat-end。 https://docs.angularjs.org/api/ng/directive/ng重複 – Bhuneshwer

是的，我有圖像和數據之間的關係，我會看這個文件。 –

如何合併這兩成單一的數組，並使用NG重複。

var app = angular.module("app", []); 
 
app.controller("controller", function($scope) { 
 
    $scope.images = ['https://angularjs.org/img/AngularJS-large.png', 'http://build.acl.com/assets/tech-logos/angular-03fcc4cfc89d9b310265e7d1e01ee0aef405abf6c632f59342b18848e1c02587.svg']; 
 
    $scope.searchName = ["Angular-Logo", "Angular-SVG-Image"]; 
 

 
    $scope.intrArr = mapImageAndName(); 
 

 
    function mapImageAndName() { 
 
    var mappedArr = []; 
 
    for (var i = 0; i < $scope.images.length; i++) { 
 
     mappedArr.push({ 
 
     'image': $scope.images[i], 
 
     'name': $scope.searchName[i] 
 
     }); 
 
    } 
 
    return mappedArr; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div class="row col-sm-12" ng-app="app" ng-controller="controller"> 
 
    <table class="displayImg col-sm-3"> 
 

 
    <tr ng-repeat="obj in intrArr"> 
 
     <td> 
 
     <img ng-src="{{obj.image}}" class="imageShow" /> 
 
     </td> 
 
     <td> 
 
     {{obj.name}} 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

來源

2016-12-26 17:01:21

你可以使用嵌套的NG-重複。

<div class="row col-sm-12" > 
     <table class="displayImg col-sm-3"> 

    <tr ng-repeat = "image in images"> 
    <td><img ng-src="{{image}}" class="imageShow"/> </td>  

    <td ng-repeat = "item in searchName"> 
      {{item[0].profileInfo.firstname}} </td> 
      </tr> 
     </table> 
    </div>

來源

2016-12-26 17:03:53

查看AngularJS ng-repeat文檔。

有一個名爲NG-重複啓動和NG-重複結束長期

AngularJS ng-repeat Document

來源

2016-12-26 17:18:21 Bhuneshwer

<tr ng-repeat = "image in images"> 
     <td><img ng-src="{{image}}" class="imageShow"/> </td> 
     <td>{{searchName[$index][0].profileInfo.firstname}} </td>  
</tr>

來源

2016-12-26 17:26:59

你能詳細解釋一下嗎？ –

在查看他的代碼時，都將數組ara映射到名稱和圖像。因此，使用第一次迭代中的'$ index'來獲取sec數組中的對應ele –

在同一張表中處理兩個ng-repeat

回答

相關問題