Question

我有4个动态数据阵列。我想做垂直表。现在我有了这个：

我的代码：

<table class="table table-striped">
    <tbody>
       <tr >
           <td ng-repeat="x in daneDoWykresuX">{{ x }}</td>
       </tr>
       <tr>
           <td ng-repeat="x in metodaPrzyblizona">{{ x }}</td>
       </tr>
       <tr>
           <td ng-repeat="x in metodaDokladna">{{ x }}</td>
       </tr>
       <tr>
          <td ng-repeat="x in metodaRK">{{ x }}</td>
       </tr>
    </tbody>
</table>

有人可以告诉我如何在行中进行多次ng-repeat，或者我该怎么做？

Answer 1

在客户端，您可以创建所有这四个阵列的单个阵列例如[[1,2,3,4]，[4,5,6,7]，[3,4,5,6]，[1,3,4,5]]

然后使用波纹管代码进行打印：如果 $ scope.myData = [[1,2,3,4]，[4,5,6,7]，[3,4,5,6]，[1,3,4,5]]

<table>
    <tr ng-repeat="data in myData">
        <td ng-repeat="x in data">{{x}}</td>
    </tr>
</table>

Answer 2

你可以选择一个并使用迭代器函数，创建如下的垂直数组：

$scope.arr = $scope.daneDoWykresuX.map(function(val, index) {
    return {
        daneDoWykresuX: val,
        metodaPrzyblizona: $scope.metodaPrzyblizona[index],
        metodaDokladna: $scope.metodaDokladna[index],
        metodaRK: $scope.metodaRK[index]
    }
})

或者，如果需要，可以删除特定的对象名称。

以下是工作示例：

angular.module("myApp", [])
  .controller("myCtrl", function($scope) {
    $scope.daneDoWykresuX = [0.00, 0.02, 0.04, 1.04, 2.04, 3.04, 4.05];
    $scope.metodaPrzyblizona = [2.20, 0.02, 0.04, 1.04, 2.04, 3.04, 4.05];
    $scope.metodaDokladna = [3.30, 0.02, 0.04, 1.04, 2.04, 3.04, 4.05];
    $scope.metodaRK = [4.40, 0.02, 0.04, 1.04, 2.04, 3.04, 4.05];
    
    $scope.arr = $scope.daneDoWykresuX.map(function(val, index) {
      return {
        daneDoWykresuX: val,
        metodaPrzyblizona: $scope.metodaPrzyblizona[index],
        metodaDokladna: $scope.metodaDokladna[index],
        metodaRK: $scope.metodaRK[index]
      }
    })
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
  <table class="table table-striped">
    <tbody>
      <tr ng-repeat="obj in arr track by $index">
        <td>{{obj.daneDoWykresuX}}</td>
        <td>{{obj.metodaPrzyblizona}}</td>
        <td>{{obj.metodaDokladna}}</td>
        <td>{{obj.metodaRK}}</td>
      </tr>
    </tbody>
  </table>
</body>

Answer 3

使用四个数组中的内容定义并填充一维数组，其顺序将根据需要进行渲染。

$scope.array = [];
// I assume that all four arrays have the same length
// if not, replace the size with whatever you want to use
var size = daneDoWykresuX.length;
for (var i=0; i < size; ++i) {
   $scope.array[i] = {};
   $scope.array[i].first  = daneDoWykresuX[i];
   $scope.array[i].second = metodaPrzyblizona[i];
   $scope.array[i].third  = metodaDokladna[i];
   $scope.array[i].fourth = metodaRK[i];
}

然后在您的视图中使用此HTML：

<table class="table table-striped">
<tbody>
   <tr ng-repeat="x in array">
       <td>{{ x.first }}</td>
       <td>{{ x.second }}</td>
       <td>{{ x.third }}</td>
       <td>{{ x.fourth }}</td>
   </tr>
</tbody>

ng-repeat - 列中4x数组的数据

3 个答案: