Question

我有两个静态div标签，里面有一个选择标签和一个具有不同ID的文本框。因此，当我克隆标记时，它只是向DOM添加相同的div标记，但是如何更改内部DOM元素标记？

这是我的代码

        <div id="masterGrade" style="border-style: solid; width: 200px">
        <select id="selectGrade1">
            <option value="grade1">Grade 1</option>
            <option value="grade2">Grade 2</option>
            <option value="grade3">Grade 3</option>
            <option value="grade4">Grade 4</option>
        </select>
        <input type="text" id="text1"/>
    </div>
    <div style="border-style: solid;width: 200px">
        <select id="selectGrade2">
            <option value="grade1">Grade 1</option>
            <option value="grade2">Grade 2</option>
            <option value="grade3">Grade 3</option>
            <option value="grade4">Grade 4</option>
        </select>
        <input type="text" id="text2"/>
    </div>

我的JS代码

    $scope.addGrade = function() {  

        var div = document.getElementById('masterGrade'),
        clone = div.cloneNode(true); 
        clone.id = "some_id";
        document.body.appendChild(clone);
    }

非常感谢任何想法。

Answer 1

将java与DOM api混合不是最佳做法。你必须采用角度方式（angular）

＆＃13;

ng-repeat

＆＃13;

var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
  $scope.grades = [{}];
  $scope.addGrade = function() {
    $scope.grades.push({});
  }
});

＆＃13;

Fiddle Demo

修改：要处理<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app='app' ng-controller='ctrl'> <button ng-click='addGrade()'>Add</button> <div style="border-style: solid; width: 200px" ng-repeat='grade in grades'> <select ng-model='grade.list'> <option value="grade1">Grade 1</option> <option value="grade2">Grade 2</option> <option value="grade3">Grade 3</option> <option value="grade4">Grade 4</option> </select> <input type="text" ng-model='grade.text' /> </div> {{grades}} </div>，请使用$index， index指令会对集合中的每个项目实例化一次模板。每个模板实例都有自己的范围，其中给定的循环变量设置为当前集合项，ngRepeat设置为项索引或键。

＆＃13;

$index

＆＃13;

var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
  $scope.grades = [{}];
  $scope.addGrade = function() {
    $scope.grades.push({});
  }
});

＆＃13;

使用Javascript克隆div并更改内部DOM元素ID

1 个答案:

Fiddle Demo

Fiddle Demo