使用angularjs ng-model创建9x9网格

时间:2016-11-15 06:21:53

标签: javascript angularjs

我尝试使用angularjs中的ng-model在ng-repeat中创建9x9表。但是创建了网格/表格,我无法从ng-model中获得确切的值。

html代码:

<tab ng-repeat="t in tabs">
<table>
<tr ng-repeat="p in planets track by $index" >
<td ng-repeat="pl in planets track by $index" >
<input type="text" class="form-control" placeholder="{{planets.pname}}" ng-model="t.planets.pname">
</td>
</tr>
</table>
</tab>

js code:

  $scope.planets = [
    {'pname':'Kethu','tamil':'கேது'},
    {'pname':'Sukran','tamil':'சுக்ரன்'},
    {'pname':'Suriyan','tamil':'சூரியன்'},
    {'pname':'Santiran','tamil':'சந்திரன்'},
    {'pname':'Sevai','tamil':'செவ்வாய்'},
    {'pname':'Raagu','tamil':'ராகு'},
    {'pname':'Guru','tamil':'குரு'},
    {'pname':'Sani','tamil':'சனி'},
    {'pname':'Puthan','tamil':'புதன்'}
];

我在ng-model中的预期输出:

tabs=[{"tabname":"T1","kethu":["kethu":0,"sukran":"5",...],"sukran":["kethu":2,"sukran":6,...]....},{"tabname":"T2",...}]

2 个答案:

答案 0 :(得分:1)

你应该把

<input type="text" class="form-control" placeholder="{{pl.pname}}" ng-model="pl.pname">

<强> DEMO

答案 1 :(得分:0)

它是其他形式的基本编程。

在嵌套for循环中,如果要访问(读/写)元素,则需要通过两个循环的枚举器对其进行引脚指向

for (i=0; i<row.length; i++){
  for (j=0; j<column.length; j++){
    data[i][j] = something
  }
}

ng-repeat

中的相同情况
<div ng-repeat="(i, rowData) in row">
  <div ng-repeat="(j, columnData) in column">
    {{rowData.name}}, {{columnData.name}} <input ng-model="data[i][j]">
  </div>
</div>
相关问题