提交ng-model angular.js的ng-repeat表格

Question

I want to submit to form with ng-repeat values for input text - but error where I submit it

HTML :

//there is html to view ng-repeat angular.js
<form method="post" ng-controller="FoodCtrl" ng-submit="addCart()">
    <ion-item class="item-thumbnail-left" >  
        <img  ng-src=""  ng-click="" >
        <p style="position:absolute;right:-25px;">
            <!--INPUT HIDDEN-->
            <input type="text" ng-model='x.id'>
            <input type="text"  ng-model='x.menu'>
            <input type="text" ng-model='x.harga'>

            <button type="submit" class="button button-balanced button-clear icon ion-android-cart">  </button> 
        </p>

        <h2> {{x.menu}} </h2>

        <p>Harga: Rp {{x.harga}}</p>
    </ion-item>
</form>

JS:

Here is JS for controller angular.js

$scope.addCart = function() {
    $http({
        method  : 'POST',
        url     : 'server/menu/add_cart',
        headers : { 'Content-Type' : 'application/json' },
        data    : JSON.stringify({ id: $scope.id ,menu: $scope.menu , harga:$scope.harga })
    }).success(function(data) {
        console.log(data);
    });
}

Answer 1

I have passed the item into the ng-click function where it is saved into another scope variable and then it is accessed in the addCart function which is called on ng-click,

Changes to be done:

In HTML:

<button type="submit" class="button  button-balanced button-clear   icon ion-android-cart" ng-click="saveIndex(x)">  </button> 

In JS:

$scope.saveIndex=function(x){
$scope.currentItem=x;
}

In addCart function:

$scope.addCart=function(){
console.log("id "+$scope.currentItem.id+"menu "+$scope.currentItem.menu+"harga"+$scope.currentItem.harga)


     $http({
     method  : 'POST',
     url     : 'server/menu/add_cart',
     headers : { 'Content-Type' : 'application/json' },
     data    : JSON.stringify({ 
id: $scope.currentItem.id ,
menu: $scope.currentItem.menu, harga:$scope.currentItem.harga })
}).success(function(data) {
    console.log(data);
 });
}

This is a working snippet as shown below,

 var app = angular.module('TryApp', []); app.controller('FoodCtrl', function($scope) { $scope.items=[{id:"232", menu:"sdfdsf", harga:"adfsdf" }, {id:"235", menu:"sdfdsf", harga:"adfsdf" }, {id:"237", menu:"sdfdsf", harga:"adfsdf" }, ]; $scope.addCart = function() { } $scope.addCart=function(){ console.log("id "+$scope.currentItem.id+"menu "+$scope.currentItem.menu+"harga"+$scope.currentItem.harga) $http({ method : 'POST', url : 'server/menu/add_cart', headers : { 'Content-Type' : 'application/json' }, data : JSON.stringify({ id: $scope.currentItem.id , menu: $scope.currentItem.menu, harga:$scope.currentItem.harga }) }).success(function(data) { console.log(data); }); } $scope.saveIndex=function(x){ $scope.currentItem=x; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script> <form method="post" ng-app="TryApp" ng-controller="FoodCtrl" ng-submit="addCart()"> <div ng-repeat="x in items"> <img ng-src="" ng-click="" > <p style="position:absolute;right:-25px;"> <!--INPUT HIDDEN--> <input type="text" ng-model='x.id'> <input type="text" ng-model='x.menu'> <input type="text" ng-model='x.harga'> <button type="submit" class="button button-balanced button-clear icon ion-android-cart" ng-click="saveIndex(x)"> </button> </p> <h2> sdfsdf</h2> <p>Harga: Rp {{x.harga}} {{currentItem.id}}</p> </div> </form>