我有一个允许用户创建服务的表单。目前,您只能向该服务添加一个提供商。
我想允许用户使用“添加其他提供商”按钮添加最多10个提供商。
这是我目前的代码:
添加-service.html
<form role="form" name="createServiceForm">
<input type="text" ng-model="title">
<h2>Attach Provider</h2>
<input type="text" ng-model="provider.title">
<textarea rows="3" ng-model="provider.description"></textarea>
<button type="submit">Add Another Provider</button>
<button type="submit" ng-click="createService()">Submit</button>
</form>
main.js
$scope.createService = function() {
var newService = {
title: $scope.title,
providers: {
provider: {
title: $scope.provider.title,
description: $scope.provider.description
}
},
};
var promise = ServiceService.add(newService);
};
我可以像这样复制部分代码:
<input type="text"ng-model="provider1.title">
<input type="text"ng-model="provider2.title">
<input type="text"ng-model="provider3.title">
...
providers: {
provider1: {
title: $scope.provider1.title,
},
provider2: {
title: $scope.provider2.title,
},
provider3: {
title: $scope.provider3.title,
}
...
}
但这似乎是一个混乱的解决方案......
在我的HTML和我的newService
对象中单击“添加其他提供者”而不重复10次时,复制表单提供者部分的最佳方法是什么?
答案 0 :(得分:2)
您可以使用ng-repeat完成您想要的任务。我已经将提供者变成了一个数组,然后你可以迭代它。如果密钥对您很重要,您可以对对象使用ng-repeat。
还添加了一个将新提供程序推送到数组上的函数,然后将在表单中显示。
<强> main.js 强>
$scope.providers = [];
$scope.addProvider = function() {
$scope.providers.push({
title: '',
description: ''
});
};
// Start with one provider
$scope.addProvider();
$scope.createService = function() {
var newService = {
title: $scope.title,
providers: $scope.providers,
};
var promise = ServiceService.add(newService);
};
<强> addService.html 强>
<form role="form" name="createServiceForm">
<input type="text" ng-model="title">
<h2>Attach Provider</h2>
<div ng-repeat="provider in providers">
<input type="text" ng-model="provider.title">
<textarea rows="3" ng-model="provider.description"></textarea>
</div>
<button ng-click="addProvider()">Add Another Provider</button>
<button type="submit" ng-click="createService()">Submit</button>
</form>