[英]Submit form ng-repeat for ng-model angular.js
我想提交带有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:
这是控制器angular.js
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);
});
}
我已将该项目传递到ng-click函数中,在此将其保存到另一个作用域变量中,然后在ng-click中调用的addCart函数中对其进行访问,
要做的更改:
在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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.