Question

我希望用HTML创建一个动态表格，对于每个单元格，我想给出一个独特的ng-model，但我不知道怎么做，任何人都可以告诉我该怎么做。

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table id="myTable">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br>
<button onclick="myFunction()">Add row</button>
<script>
function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
}
</script>
</body>
</html>

我做了这个但却不知道如何添加ng-model。

Answer 1

不确定你在寻找什么但是你可以做这样的事情：

angular.module("sa", []).controller('MyCtrl', function($scope) {
  $scope.tableData = [{
    title: "Foo",
    cols: [{
      type: "amount",
      value: 0
    }, {
      type: "discount",
      value: 0
    }, {
      type: "title",
      value: ""
    }]
  }, {
    title: "Bar",
    cols: [{
      type: "amount",
      value: 0
    }, {
      type: "discount",
      value: 0
    }, {
      type: "title",
      value: ""
    }]
  }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<div ng-app="sa" ng-controller="MyCtrl">
  <table class="table table-bordered">
    <tr ng-repeat="row in tableData">
      <td>{{row.title}}
        <td ng-repeat="col in row.cols">
          {{col.type}}
          <input type="text" ng-model="col.value">
        </td>
    </tr>
  </table>
  
  <pre>{{tableData | json}}</pre>
</div>

如何动态添加新行并向每行添加唯一的ng-model

1 个答案: