Submit form ng-repeat for ng-model angular.js

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

Not clear what a problem are you facing? Please add more info. — VadimB
– VadimB, Commented Dec 2, 2016 at 9:33

GraveyardQueen · Accepted Answer · 2016-12-02 11:27:39Z

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>

Glad to have helped :)if the solution helped you, please don't forget to mark it as the answer,as it will help people who check for such an issue later

Collectives™ on Stack Overflow

Submit form ng-repeat for ng-model angular.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related