提交表单NG重复了NG-模型angular.js

Question

我要提交给形式与ng-repeat值input text - 但错误，我提交

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：

这里是JS for controll呃angular.js

Answer 1

我已经通过了项目进入它保存到另一个范围变量，然后它在其中呼吁addCart功能访问的NG-点击功能NG单击，

要做的变化：

在HTML：

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

在JS：

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

在addCart功能：

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

这是如下所示的工作段，

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>