我正在尝试制作一个动态表单来创建订单。使用添加按钮,它会附加一个输入表单,以便您可以在必要时为每个订单添加更多产品。
现在我想将表单数据解析为 JSON 文件,但我该怎么做?
我已经尝试使用field.product和field.amount作为ng模型,但它不起作用,因为当我在一行中输入产品时,所有其他行中也会出现相同的文本。
<form>
<div class="form">
<table>
<tr ng-repeat="content in rows">
<td>
<input class="product" ng-model="field.product" placeholder="{{content.product}}" type="text">
</td>
<td>
<input ng-model="field.amount" type="number" min="0" value="1" type="text">
</td>
<td>
<button class="btn btn-primary btn-functionality btn-danger btn-del" ng-click="delRow($index)">x</input>
</td>
</tr>
</table>
<button class="btn btn-primary btn-success btn-add" ng-click="addRow()">+</button>
</div>
<div class="main-buttons">
<button class="btn btn-primary btn-lg btn-create" ng-click="createOrder()">Create</button>
<button class="btn btn-primary btn-lg" ng-click="cancelOrder()">Cancel</button>
</div>
</form>
<div style="text-align: center; font-size: 20px; border: 2px solid red; margin: 20px" ng-repeat="order in orders.data track by $index">
<div ng-repeat="product in order">
{{product.product}}
{{product.amount}}
</div>
</div>
控制器:
'use strict';
angular.module('myApp.orderNew', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/order/new', {
templateUrl: 'order-new/order-new.template.html',
controller: 'OrderNewCtrl'
});
}])
.controller('OrderNewCtrl', function($scope, $location, $http) {
$scope.field = {
amount: '1'
};
$scope.rows = [{
product: 'Product',
amount: 'Amount'
}];
$scope.counter = 1;
$scope.addRow = function() {
$scope.rows.push({
product: 'Product',
amount: 'Amount'
});
$scope.counter++;
}
$scope.delRow = function(row) {
if ($scope.rows.length < 2) { return; }
$scope.rows.splice(row, 1);
}
$scope.cancelOrder = function() {
$location.path('/orders');
}
$scope.createOrder = function() {
var data = $scope.fields;
alert(data);
//$post('/path_to_server', obj);
}
$http.get('orders.json').then(function(data) {
$scope.orders = data;
});
});
我不完全清楚你在问什么,但听起来您希望您的模型对于ng-repeat
中的每个重复项目都是唯一的。如果是这样的话,我会将ng-model
设置为ng-model="field.product[$index]"
和ng-model="field.amount[$index]"
让你的问题更清楚,但如果你想用ng-click提交表单,这是解决方案
$scope.field={}
$scope.createOrder = function(){
$http({
method:'post',
url:'yoururl',
data:$.param($scope.field),
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(onSuccess)
function onSuccess(response){
///handle when success
}
}