Question

我想在AngularJS中构建一个带按钮/输入框的表。
在第一列中，它应该有一些类别名称ID，名称，性别。第2-5列应具有多个输入（用于ID或名称）或性别的下拉框。每栏的标题，如Person1，Person2，Person3和Person4
我试图通过AngularJS中的ng-repeat来做到这一点，但我不知道如何正确设置它。

此外，我需要这样做，这些人列在列中。

我的基本代码至少是数据（并且数据应该是可编辑的）：

$scope.data = [{
  "person":"person1",
  "characteristics":[{"_id": "001"}, {"name":"Andi"}, {"gender":"Male"}]
},[{
  "person":"person2",
  "characteristics":[{"_id": "002"}, {"name":"Ben"}, {"gender":"Male"}]
}];

我找到了一些小提琴的例子，但它们都没有为我工作.. 有什么事情可以说明我是如何开始的吗？

非常感谢和欢呼，岸堤

Answer 1

我不得不对你的数据采取一些自由，因为我无法看到结构的必要性

$scope.data = [{
person: "person1",characteristics: {_id: "001",name: "Andi",gender: "Male"}},{
person: "person2",characteristics: {_id: "002",name: "Ben",gender: "Male"}}]

然后html虽然不是很优雅，但是会像：

<div class="panel panel-default col-sm-10">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Category</th>
        <th ng-repeat="p in data">{{ p.person }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Id</td>
        <td ng-repeat="c in data"><input type="text" ng-model="c.characteristics._id" /></td>
      </tr>
      <tr>
        <td>Name</td>
        <td ng-repeat="c in data"><input type="text" ng-model="c.characteristics.name" /></td>
      </tr>
    </tbody>
  </table>
</div>

带有Angular按钮的动态表

1 个答案: