Question

我有一个允许用户创建服务的表单。目前，您只能向该服务添加一个提供商。

我想允许用户使用“添加其他提供商”按钮添加最多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次时，复制表单提供者部分的最佳方法是什么？

Answer 1

您可以使用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>

以角度重复表格

1 个答案: