在同一个表中处理两个 ng-repeat答案

【问题标题】：handling two ng-repeat in same table在同一个表中处理两个 ng-repeat
【发布时间】：2016-12-27 02:29:37
【问题描述】：

我有一个保存在var images 中的图像列表和一个保存在var searchName 中的名称列表，现在我需要显示图像和名称，但我可以在只显示所有图像之后显示它。

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>

【问题讨论】：

如果图像和名称之间有关系，则根据您的要求合并两个数组或试试这个：stackoverflow.com/questions/30846032/…
@Nicoleta - 您可以先通过合并控制器上的数据来准备如果图像和项目之间存在关系，您也可以尝试使用 ng-repeat-start ， ng-repeat-end。 docs.angularjs.org/api/ng/directive/ngRepeat
是的，我有图像和数据之间的关系，我会看看这个文件。

标签： angularjs angularjs-ng-repeat

【解决方案1】：

如何将这两个合并为单个数组并使用 ng-repeat。

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>

【讨论】：

【解决方案2】：

您可以使用嵌套的 ng-repeat。

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

【讨论】：

【解决方案3】：

查看 AngularJS ng-repeat 文档。

有一个名词叫 ng-repeat-start 和 ng-repeat-end

AngularJS ng-repeat Document

【讨论】：

【解决方案4】：

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

【讨论】：

你能详细说明一下吗？
查看他的代码，数组 ara 都映射到 name 和 image。所以，使用第一次迭代中的 $index 在 sec 数组中获取对应的 ele