Javascript 将表格数据作为对象临时添加到表格中

我试图做的是在一个表单中获取4-5个输入，存储到一个对象，当用户选择“保存”时，临时存储在会话中，并能够访问以在同一页的表中显示该对象，然后允许用户再次输入数据表单输入，以添加到下一个对象

因此，最终，用户可以输入1个对象或最多6个对象，完成后，允许用户将所有对象作为对象数组或类似的内容提交

所以我不是一个角功率用户，但我想它在某处有这种功率。所以我的问题围绕着一个很好的方法展开，也许是想找到一个很好的例子。你们有谁能帮忙吗

---

非常感谢。

如果您将表格和表单放在同一页上，这其实很容易。您可以简单地为输入的对象数组使用一个范围变量，为当前对象本身使用一个范围变量

我现在将做一个没有您所有要求的示例（例如，用户最多可以输入六个对象），但这应该是非常直接的实现

首先以HTML为例：

<form ng-controller="RolesController">
    <label for="name">Name</label>
    <input type="text" id="name" ng-model="current.name">
    <label for="slug">Slug</label>
    <input type="text" id="slug" ng-model="current.slug">
    <label for="level">Level</label>
    <input type="number" id="level" ng-model="current.level">
    <!-- buttons -->
    <button type="button" ng-click="storeTemp()">Store temporarily</button>
    <button type="button" ng-click="storeAll()">Store all</button>
</form>

---

显然，如果您要求用户始终输入相同数量的新对象，您也可以对这两个操作使用相同的按钮。

啊，主详细信息表单

您不必担心用户的多个输入会带来节约。只要声明一个数组，并在用户每次单击“保存”时将对象推入其中即可。只要不破坏控制器（即不重新加载页面、不切换控制器等），您的数据始终存在

//master
$scope.toBeSentToServer = [];

//details, declare your object wherever according to your needs
$scope.formVariable = {
   var1:"",
   var2:"",
   var3:""
};

$scope.clickSave = function(){
  $scope.toBeSentToServer.push($scope.formVariable);
  //reinstantiate your $scope.formVariable so that your form is empty
  $scope.formVariable = {};
}

现在，您可以使用我们喜爱的

ng repeat

在表中迭代

scope.toBeSentToServer

<table>
  <tr ng-repeat= "item in toBeSentToServer">
     <td>{{item.var1}}</td>
     <td>{{item.var2}}</td>
     <td>{{item.var3}}</td>
  </tr>
</table>

{{item.var1}}
{{item.var2}}
{{item.var3}

当然，有时你会想使用cookies/本地数据存储，因为有太多的库可以使用。Angular有自己的

$cookies

服务，但我强烈推荐。（对不起，可能是偏见）

但在所有这些之前，如果您正在寻找数据持久化机制，也许可以尝试在angularjs中使用工厂或服务

<table>
  <tr ng-repeat= "item in toBeSentToServer">
     <td>{{item.var1}}</td>
     <td>{{item.var2}}</td>
     <td>{{item.var3}}</td>
  </tr>
</table>