Search code examples
formsangularjsangularjs-scopedynamic-arrays

Adding field to object array in AngularJS


I have a form containing an ng-repeat, with some input hidden field that i need to pass to the server. This is the code of the page:

 <form ng-controller="FrmController" method="post">
           <div class="orderlist">                    
                    <table class="table gas">  
                        <thead>  
                           <tr>  
                            <th scope="col" ng-click="orderByField='image'; reverseSort = !reverseSort">Immagine

                            <span ng-show="orderByField == 'image'" class="listorder">
                            <span ng-show="!reverseSort"><i class="fa fa-sort-desc"></i>          </span>
                            <span ng-show="reverseSort"><i class="fa fa-sort-asc"></i></span>
                                        </span>
                                      </th>

      [...] 

                        </thead>  
                        <tbody id="gasbody" ng-repeat="product in products |  filter: searchQuery | orderBy:orderByField:reverseSort" class="repeated-item">  
                         <tr>  
                            <input type="hidden" name="form-x-id" ng-model="form.form-x-id">

(x represent the index of the ng-repeat)

[...]

<button ng-click="addtoCart();" class="def-btn" type="submit"><span class="glyphicon glyphicon-shopping-cart"></span> Add to cart</button>

</form>

This is the code of the controller:

function FrmController($scope,$http,transformRequestAsFormPost){
                $scope.form = {};
                $scope.addtoCart = function() {
                    $http({
                        method: 'POST',
                        url: '',
                        data: $.param($scope.form),
                        headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
                    });
                }
}

I need to send data in this format:

form-1-id: value 
form-2-id: value2 
form-3-id: value3

$scope.form = {form-1-id: value,
               form-2-id: value2,
               form-3-id: value3, ... 
               ... form-n-id: valuen}

where n represent the lenght of ng-repeat.

ecc....

How can i dynamically add field to a $scope binded to a ng-model? Is it possible?

Thanks


Solution

  • I dont underestant exactly , what do you want ? Do you want index of ng-repeat?

    You can just use $index like this

           <input name="form-{{$index}}-id" type="Hidden" ng-model="form[$index]">
    

    Or do you want to push something to your form dynamically? You can use:

            $scope.addToForm=function(newItem){
            $scope.form.push(newItem)
    
            }
    

    Of course you have to change your form={} , to form=[]