AngularJS architecture modèle de données

Question

je la chose suivante sur mon application angulaire:

$scope.things = [{ 
    title: 'Simple', 
    type: 1, 
    form: { 
     input: [1, 2, 3],       
     clone: true 
     } 
}]; 

$scope.clone = function(item) { 
    item.form.input.push(Math.floor(Math.random() * 999)); 
}; 

Et sur la partie HTML:

<div ng-repeat="item in things" class="item"> 
    <h2>{{item.title}}</h2> 
    <div ng-repeat="input in item.form.input"> 
     <input type="text" /> 
    </div> 
    <button ng-click="cloneInput(item)">Clone</button> 
</div> 

Lorsque vous appuyez le bouton Clone Je pousse une nouvelle element à form.input array et ajoute une nouvelle entrée au DOM.

Je souhaite $ http.post toutes les valeurs pour les entrées.

Je sais pousser quelque chose que je dois utiliser

$http.post('/path/to/my/api', {my object}).callback() 

Mais je ne sais pas comment faire un objet de tous les .item entrées. Est-ce que quelqu'un peut m'expliquer comment ou suggérer une meilleure solution?

Answer 1

Si vous utilisez un ng-model pour vos entrées et réglez sur un objet que vous pouvez ensuite injecter cet objet à la poste, voici un exemple très basique:

JSFiddle

HTML:

<div ng-app="myApp" ng-controller="dummy"> 
    <div ng-repeat="input in items"> 
     <input type="text" name="{{input.name}}" ng-model="data[input.name]" /> 
    </div> 
    <button ng-click="submit()">Submit</button> 
    <p ng-show="displayIt">{{data}}</p> 
</div> 

JS:

angular.module('myApp', []) 
    .controller('dummy', ['$scope', function ($scope) { 
    $scope.items = [{ 
     name: 'test' 
    }, { 
     name: 'test2' 
    }]; 

    $scope.data = {}; 
    $scope.displayIt = false; 
    $scope.submit = function() { 
     // This is only to check it 
     $scope.displayIt = true; 
     // Do your post here 
    }; 

}]);