두 테이블을 동일한 테이블에서 처리하기

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 반복으로이 두 가지.

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>

Answer 2

당신은 중첩 된 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> 

Answer 3

AngularJS ng-repeat 문서를 살펴보십시오.

NG-반복 시작과 NG 반복 엔드라는 용어는

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>