Javascript AngularJS在更改时克隆选择框，并将所有选择框值应用于同一模型数组

我需要在更改时克隆选择框，并将新值应用于新克隆的选择框。只有原始选择框才能克隆自身，并且应始终处于noneselected选项中。 克隆的选择框的所有值都应保存在一个数组中。 请查找以下代码：

<div ng-app="myApp" ng-controller="MyCtrl">
   <div id="space-for-additional-select"></div>
     <div new-select>
        <select ng-model="result[counter]" ng-selected="result[counter].id" ng-options="option as option.value for option in options">
            <option value="">Select</option>
        </select><br/><br/>
     </div>
   <button ng-click='showResult()'>Show result</button>
</div>

挑选



显示结果

以及以下AngularJS代码：

var app = angular.module('myApp', []);
app.controller('MyCtrl', ['$scope', function ($scope) {

    $scope.result = [];

    $scope.counter = 0;

    $scope.options = [
        { id: 1, value: 'opt1' },
        { id: 2, value: 'opt2' },
        { id: 3, value: 'opt3' }
    ];
    $scope.showResult = function() {
    for (index = 0; index < $scope.result.length; ++index) {
          console.log($scope.result[index]);
        }
    }

}]);
app.directive("newSelect", function() {
    return {
        restrict: "A",
        compile: function(tElement, attrs) {
            return function($scope) {
                var content = tElement.children();
                    content.bind("change", function() {
                    $scope.counter = $scope.counter + 1;
                    angular.element(document.getElementById('space-for-additional-select')).append(content.clone());
            });
            }
        }
    };
});

var-app=angular.module（'myApp'，[]）；
app.controller（'MyCtrl'，['$scope'，函数（$scope）{
$scope.result=[]；
$scope.counter=0；
$scope.options=[
{id:1，值：'opt1'}，
{id:2，值：'opt2'}，
{id:3，值：'opt3'}
];
$scope.showResult=函数（）{
对于（索引=0；索引<$scope.result.length；++index）{
log（$scope.result[index]）；
}
}
}]);
app.directive（“newSelect”，function（））{
返回{
限制：“A”，
编译：函数（远程通讯、属性）{
返回函数（$scope）{
var content=tElement.children（）；
content.bind（“change”，function（））{
$scope.counter=$scope.counter+1；
元素（document.getElementById（'space-for-addition-select'））.append（content.clone（））；
});
}
}
};
});

同一选项可以选择多次

此代码中的问题是，新克隆的选择框未预先选定，而且更改后原始选择也未处于未选定模式。

---

下面是@charlietfl已经提到的

，在Angular的世界中，复制DOM元素并不是正确的方法

---

如果需要创建多个

元素，则可以使用

ng repeat

来创建它们。另外，根据使用

ng model

的型号选择

。这样，您就可以简单地克隆控制器中的元素来复制

元素。

在这里进行简单的dom克隆确实不是正确的方法。您需要为每个对象创建一个新的

ng模型

，并且每当涉及到dom和angular指令时，都需要使用

$compile

，否则指令将无法工作。始终首先考虑数据模型，并让angular尽可能地管理DOM克隆选项。。。了解angular api中的各种实用程序，如

angular.copy（）

。它们都列在主api菜单的顶部，您可以在@charlietfl查看注释，然后查看

angular.copy（）

。