Question

有人可以帮我使用Angular JS ng-repeat创建HTML表格。我有如下数组

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

使用这些我想生成HTML表格

<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

简单的解决方案：

PropertyChanged

＆＃34;正常＆＃34;通过将值合并到像@ sachila的答案这样的对象中来解决问题。如果您需要帮助将数组更改为对象：

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

Answer 2

将数组修改为ine对象数组

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 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

使用键值对合并两个数组并使用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>

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

4 个答案: