在Angular中将表单数据临时转换为table对象

Temporary form data to table as object in Angular

本文关键字：转换 table 对象 数据 Angular 表单      更新时间：2023-09-26

我要做的是采取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>

And the Controller:

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 });
    };
});

显然，如果你要求用户总是输入相同数量的新对象，你也可以为两个动作使用相同的按钮。

啊，主从表单!

您不需要担心用户节省的多次输入。只需声明一个数组，并在每次用户点击"保存"时将对象推入其中。只要你不破坏你的控制器(即没有页面重载，没有控制器切换等)，你的数据总是在那里。

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

当然，有时您会想要使用cookie/local-data-storage，有大量的库可以做到这一点。Angular有自己的$cookies服务，但我强烈推荐Gregory Pike的Angular -local-storage。(抱歉可能有偏见)

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

相关文章：