Question

我正在试图弄清楚如何做这样的事情。

如果我有数据数组

[{complexName: value, complexName2: value}, {complexName: value, complexName2: value}];

另一个数组

[{display: "easy name2", bind:"complexName2"}, {display: "easy name", bind:"complexName"}]

我想使用角度ng-repeat在两个数组之间循环并创建一个表，如下所示：

<table class="table table-stripped table-condensed table-bordered">
    <thead>
        <tr>
            <td ng-repeat="obj2 in object2">
                {{obj2.display}}
            </td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="obj1 in object1 WHERE obj1.key == obj2.bind">
            <td>{{obj1.value}}</td>
        </tr>
    </tbody>
</table>

有关如何操作的建议吗？

Answer 1

您可以通过object2两次迭代并使用ng-repeat通过<table class="table table-stripped table-condensed table-bordered"> <thead> <tr> <td ng-repeat="obj2 in object2"> {{obj2.display}} </td> </tr> </thead> <tbody> <tr> <td ng-repeat="obj2 in object2"> {{object1[$index][obj2.bind]}} </td> </tr> </tbody> </table>向我们提供来完成此操作。

请考虑以下事项：

object1

假设object2中的索引与var myApp = angular.module('myApp', []); function MyCtrl($scope) { $scope.object1 = [ {complexName: 'value1', complexName2: 'value2'}, {complexName: 'value3', complexName2: 'value4'} ]; $scope.object2 = [ {display: "easy name", bind: "complexName"}, {display: "easy name2", bind: "complexName2"} ]; }中指定的索引一致，我相信这是您尝试完成的内容。

＆＃13;

tr, td {
  border: 1px solid black;
  padding: 5px;
}

＆＃13;

<html ng-app="myApp">
  <table ng-controller="MyCtrl">
    <thead>
      <tr>
        <td ng-repeat="obj2 in object2">
          {{obj2.display}}
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td ng-repeat="obj2 in object2">
          {{object1[$index][obj2.bind]}}
        </td>
      </tr>
    </tbody>
  </table>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

＆＃13;

import {My_Global_Service} from './global_services/MyService'

@Component{....} 
export class Header{

   constructor(private _my_global_service: My_Global_Service){}

}

＆＃13;

Answer 2

**解决方案**

关于@ Sean3z想法如果object2（显示标签）与object1（数据）上的键的顺序匹配，我们可以在重复时简单地使用它，我只是让它发生了。

实施例<！/ P>

ArrayData = [{complexName: value, complexName2: value},
             {complexName: value, complexName2: value}];

ArrayLabels = [{display: "easy name2", bind:"complexName2"},
               {display: "easy name", bind:"complexName"}];

首先，我创建一个新对象并将其设置为匹配，作为我的ArrayLabels.bind

var objAux = {};
for (var x = 0; x < arrayLabels.length; x++) {
    objAux[arrayLabels[x].bind] = null;
}

//output: {complexName2: null, complexName: null}

然后，创建一个新数组来存储您订购的数据并用arrayData填充它。

var orderedData = [];
for (var i = 0; i < arrayData.length; i++) {
   for (key in arrayData[i]) {
      obj[key] = arrayData[i][key];
   }
   //Each time i ends the loop on the object, I push it into my array.
   var helper = angular.copy(obj);
   orderedData.push(helper);
}
//After all loops, my $scope.data receive my data.
$scope.data = orderedData;

最后，我只需要填充表格，因为对象的顺序匹配。

<table class="table table-stripped table-condensed table-bordered">
  <thead>
    <tr>
      <td ng-repeat="label in arrayLabels">
        {{label.display}}
      </td>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="obj in data">
      <td ng-repeat="value in obj">
        {{value}}
      </td>
    </tr>
  </tbody>
</table>

ngRepeat迭代两个对象

2 个答案: