Question

我正在构建一个动态添加了多个选择元素的订单。验证由Angular处理，但验证会破坏克隆元素。这是一个Plunkr

http://plnkr.co/edit/TqofTw6K7nvLJzPEYAi3?p=preview

Answer 1

不要克隆这些元素，而不是 angular 这样做的方式......

而是使用ng-repeat指令循环遍历您要收集的项目。

关于表单验证，请参阅此article，了解如何使用ng-form

单独验证每个项目

Answer 2

正如Brocco所提到的，克隆元素不会成为这样做的有条理的方式。您可以按照以下步骤执行此操作：

创建一个数组以保存所有新添加的<select>项。例如$scope.dataArray = []
使用ng-form和ng-repeat一起包装每个表单项，请务必使用此表示法：

<div ng-repeat="data in dataArray track by $index" ng-form="dataForm"></div>

避免ng-repeat重复。
创建范围函数以添加新的dataArray项，类似于克隆函数。 e.g：

$scope.addItem = function() { $scope.dataArray.push({}) }
使用dataArray [$ index] .name作为模型，以获取dataArray数组中每个项目的直接引用

<强> HTML

        <div ng-repeat="data in dataArray track by $index" ng-form="dataForm">
          <div class="item">
            <div class="form-group" ng-class="{ 'has-error' : dataForm.name.$invalid && submitted }">
                <label>Name</label>
                <select id="name" name="name"  ng-model="dataArray[$index].name" 
                          ng-options="item as item.name for item in items" required></select>
                <p ng-show="dataForm.name.$invalid && dataForm.name.$pristine && submitted" class="help-block">You name is required.</p>
            </div>
            <span class="btn btn-success" ng-click="addItem()"> Add </span> 
          </div>
        </div>

<强> JAVASCRIPT

  $scope.dataArray = [{}];

  $scope.items = [
          { name: 'Protein 1' },
          { name: 'Protein 2' },
          { name: 'Protein 3' },
          { name: 'Protein 4' },
          { name: 'Protein 5' }
  ];

  $scope.addItem = function() {
    $scope.dataArray.push({})
  }

请参阅此plunker update。

使用Angular形成克隆的输入验证

2 个答案: