Question

我使用两个ng-repeats在一个表格中显示所有细节。这两个列表现在彼此相关。我想在左侧显示第一个列表（客户及其ID），在表格的右侧显示第二个列表（销售及其ID）。

输出应该是这样的。

    Customers   Id   Sales     Id
----------------------------------
    cust 1.1    1   site 2.1   4
    cust 1.2    2   site 2.2   5
    cust 1.3    3
    cust 1.4    7

Plunker

Answer 1

使用表格以下方式

 <table>
  <tbody >
    <tr >
      <td valign='top'>
          <table>
            <tr><th>Customers</th> <th>Id</th> </tr>
            <tr ng-repeat="customer in customers">
              <td>{{customer.name}}</td><td>{{  customer.id}}</td>
              </tr>
          </table>
      </td>
      <td valign='top'>
         <table>
          <tr><th>Sites</th> <th>Id</th></tr>  
           <tr ng-repeat="site in sales" >
              <td>{{site.name}}</td><td>{{  site.id}}</td>
           </tr>
         </table>
      </td>         
    </tr>
  </tbody>
</table>

Answer 2

尝试此代码可能会对您有所帮助

<tbody>
   <tr  ng-repeat="customer in customers">          
      <td>{{customer.name}}</td><td>{{  customer.id}}</td>
      <td>{{sales[$index].name}}</td><td>{{sales[$index].id}}</td>
   </tr>
 </tbody>

angular.module('myApp', []).controller('MainController', function($scope){
  $scope.haha = "wow";
  $scope.customers = [
          {name: 'cust 1.1',id:"1"},
          {name: 'cust 1.2',id:"2"},
          {name: 'cust 1.3',id:"3"},
          {name: 'cust 1.4',id:"7"}
       
    ];
     $scope.sales = [
     
          {name: 'Site 2.1',id:"4"},
          {name: 'Site 2.2',id:"5"}
       
  ];
});

/* 

    output something like this.(customers)
    Customers   Id   Sales     Id
    ----------------------------------
    cust 1.1    1   site 2.1   4
    cust 1.2    2   site 2.2   5
    cust 1.3    3
    cust 1.4    7
  */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="MainController">
    <table>
      <th>Customers</th>
      <th>Id</th>
      <th>Sites</th>
      <th>Id</th>
      <tbody>
        <tr  ng-repeat="customer in customers">          
          <td>{{customer.name}}</td>
          <td>{{  customer.id}}</td>
          <td>{{sales[$index].name}}</td>
          <td>{{sales[$index].id}}</td>
        </tr>
      </tbody>
    </table>    
  </body>

Answer 3

使用map函数，您可以将两个数组合并为单个数组，如下所示

$scope.resultArray = $scope.customers.map(function(value, index) {
    return {
        data1: value,
        data2: $scope.sales[index]
    }
});

您可以使用ng-repeat循环播放。

以下是 Working fiddle

希望这会有所帮助：）

Answer 4

您可以在此找到问题的解决方案

Solved Plunker

 $scope.resList = $scope.customers.map(function(value, index) {
return {
    cust: value,
    sal: $scope.sales[index]
}

}）;

在一个表中使用两个ng-repeats并有条件地显示它

4 个答案: