Question

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

Answer 1

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

＆＃13;

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;
  }
});

＆＃13;

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

＆＃13;

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

Answer 3

查看AngularJS ng-repeat文档。

有一个名为ng-repeat-start和ng-repeat-end

的术语

AngularJS ng-repeat Document

Answer 4

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

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

4 个答案: