使用数组中的 ng-repeat 创建 HTML Table

Question

谁能帮我用 Angular JS ng-repeat 创建 HTML table。我有如下数组

cyclename = [cycle1,cycle2,cycle3]
passValue = [2,5,250]

使用这些我想生成 HTML Table as

<table>
  <tr>
    <td>cycle1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>cycle2</td>
    <td>5</td>
  </tr>
  <tr>
    <td>cycle3</td>
    <td>250</td>
  </tr>
</table>

我已经在 Angular JS 中尝试如下，但没有成功

<table class="table">
    <tr ng-repeat="x in cyclename">
    <td>{{x}}</td>
    </tr>
    <tr ng-repeat="x in passValue">
    <td>{{x}}</td>
    </tr>
 </table>

Answer 1

将您的数组修改为一个对象数组

fullArr = [{cyclename :'cycle1',passValue : '2' },{cyclename :'cycle2',passValue : '5' },{cyclename :'cycle3',passValue : '250' }]

 <table class="table">
    <tr ng-repeat="x in fullArr">
    <td>{{x.cyclename}}</td>
    <td>{{x.passValue}}</td>
    </tr> 
 </table>

Answer 2

用键值对合并两个数组并使用 ng-repeat

cyclename = [cycle1,cycle2,cycle3]
passValue = [2,5,250]

to 

mergerArr=[{
             key:cycle1,
             value:2
            },{
             key:cycle2,
             value:5
           }]

Html 会像下面这样

<table class="table">
<tr ng-repeat="x in mergerArr">
<td>{{x.key}}</td>
<td>{{x.value}}</td>
</tr>
</table>

Answer 3

这是最简单的一种方法，使用 $scope 并参考下面的代码

控制器:

 $scope.cyclename = ["cycle1","cycle2","cycle3"]
 $scope.passValue = [2,5,250]

模板

<table>
 <tr ng-repeat="x in cyclename">
   <td>{{x}}</td>
   <td>{{passValue[$index]}}</td>
 </tr>

希望这篇plunker对您有所帮助

Answer 4

简单的解决方案：

<table>
    <tr ng-repeat="i in [0,1,2]">
        <td>{{cyclename[i]}}</td>
        <td>{{passValue[i]}}</td>
    </tr>
</table>

"Normal" 通过将值合并到@sachila 的答案等对象中来解决。如果您需要帮助将数组更改为对象：

$scope.fullArr = cyclename.map(function(item, i) {
  return {
    cyclename: item,
    passValue: passValue[i]
  }
})

使用数组中的 ng-repeat 创建 HTML Table

Create HTML Table Using ng-repeat from Array

html-table

angularjs

angularjs-ng-repeat