将临时表单数据作为Angular中的对象添加到表中

Question

我正在尝试做的是采取4-5的形式输入，存储到一个对象，当用户选择‘保存’，临时存储在会话中，并能够访问显示在同一页的表格中的一行中的对象，然后允许用户输入数据表单输入再次添加到下一个对象。

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

所以我不是一个angular超级用户，但我认为它在某个地方也有这个能力。所以我的问题围绕着一个好的方法来发展，也许是试图找到一个好的例子。你们有谁能帮上忙吗？

非常感谢。

Answer 1

如果表格和表单在同一页上，这实际上是相当简单的。您可以简单地将一个范围变量用于输入对象的数组，并将一个范围变量用于当前对象本身。

我现在要做一个没有你所有需求的例子(例如，用户最多可以输入六个对象)，但这应该是非常简单的实现。

首先是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>

和控制器：

angular.module('administration').controller('RolesController',
    ['$scope', '$http', function($scope, $http) {

    $scope.current = {};
    $scope.all = [];

    $scope.storeTemp = function() {
        /* do validation here or in html before ... */
        $scope.all.push($scope.current);
        $scope.current = {};
    };

    $scope.storeAll = function() {
        /* maybe another validation ... */
        $http.post('admin/roles', { roles: $scope.all });
    };

});

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

Answer 2

啊，主从表单！

你不需要担心用户的多个输入是节省的。只需声明一个数组，并在用户每次单击“保存”时将对象推入其中。只要你不破坏你的控制器(也就是不重新加载页面，不切换控制器等)，你的数据就会一直在那里。

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

当然，有时你会想要使用cookies / local-data-storage，有太多的库可以用来做这件事。Angular有自己的$cookies服务，但我强烈推荐Gregory Pike的angular-local-storage。(抱歉，也许是偏见)

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