CODEWITHSUNDEEP
javascriptarraysangularjsforms
Mark
Mark

Reputation: 1872

Temporary form data to table as object in Angular

What I am trying to do is take 4-5 inputs in a form, store to an object and when user selects 'save', temporarily store in session and be able to access to show that object in a row in a table on same page and then allow user to enter data form input again to add to next object.

So in the end, the user may enter 1 object or up to 6 and when done, allow user to submit all objects as an array of objects or something to that effect.

So I am not an angular power user, but figure it has this power somewhere. So my questions evolve around a good approach to this and maybe trying to find a good example or so. Any of you able to help on this?

Thanks much.

Upvotes: 0

Views: 2192

Answers (2)

CozyAzure
CozyAzure

Reputation: 8468

Ah, master-detail form!

You do not need to worry about the multiple inputs the user are savings. Just declare an array and push your objects into it every time the user click 'save'. As long as you do not destroy your controller (i.e no page reload, no switch of controllers, etc) your data are always there.

//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 = {};
}

And now you can use our beloved ng-repeat to iterate through scope.toBeSentToServer inside the table.

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

Of course, there will be times you would want to use the cookies / local-data-storage, there is a plethora of libraries available to do it. Angular has its own $cookies service but I would highly recommend angular-local-storage from Gregory Pike. (Sorry maybe bias)

But before all these, if you are looking for data persistent mechanism, maybe try using a factory or sevice in angularjs?

Upvotes: 1

Namoshek
Namoshek

Reputation: 6544

Well, this is actually quite easy if you have the table and the form on the same page. You can simply use one scope variable for the array of entered objects and one scope variable for the current object itself.

I'll now do an example without all of your requirements (e.g. that the user can enter up to six objects the most), but this should be quite straight forward to implement.

First take the 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 });
    };

});

Obviously you could also use the same button for both actions if you require your user to always input the same amount of new objects.

Upvotes: 1

Related Questions