Question

当我点击添加按钮时，克隆div正在重复。如何在克隆div中发布字段。

<div class="row" id="append-row">
            <div class="clone-div-{{count}}" id="clone-div">
                <div class="col-md-6">
                    <div class="form-group input-group-sm">
                        <label>Title</label>
                        <input type="text" class="form-control" id="addTitle" placeholder="Title" ng-model="chapters.chapter.title">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group input-group-sm">
                        <label>Select Language</label>
                        <select class="form-control" name="country" id="country" ng-model="chapters.chapter.languageID" ng-options="value.ID as value.language for value in technical.languages">               
                            <option value="">Select Country</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

这部分是angularjs代码。

$scope.count = 1;
$scope.addChapter = function() {
    var iEl = angular.element( document.querySelector('#append-row') );
    var wEl = angular.element( document.querySelector('#clone-div') );
    iEl.append(wEl.clone());
    $scope.count+=1;
};

Answer 1

你应该在ng-repeat中对模板进行克隆/重复，并事先准备好数据，这是一种更清洁的方式。您会注意到，例如，在您拥有的模板代码中，所有ng-model都是相同的，如果您有1个'clone'div或100，则将始终显示相同的信息。

更好的方法是在模板中编写克隆div并将其用作可重复的ng-template“脚本”，例如：

// main template
<script type="text/ng-template" id="cloneable.html">
  // Your code here, but change reference to ng-model, ie this line as an example:
  <input type="text" class="form-control" id="addTitle" placeholder="Title" ng-model="chapters.chapter[$index].title">
</script>

// main template, your new repeat then includes the repeatable script
<div ng-repeat="foo in manyFoos"
  ng-include="'cloneable.html'"></div>

通过这种方式，您可以使用ng-repeat产生的$ index作为模型的一部分，以准确地分离每个重复块。在你的控制器中，chapters.chapter将是一个对象数组。

我不知道“添加”按钮部分或您要添加的信息，但上述情况应该会解决您遇到的模型问题。

在clone div angularjs ng-model中发布数据

1 个答案: