javascript - AngularJS 在更改时克隆选择框并将所有选择框值应用到同一模型数组

Question

我需要在更改时克隆选择框并将新值应用于新克隆的选择框。只有原始选择框应该能够克隆自身，并且它应该始终处于无选定选项中。克隆选择框的所有值应保存在数组中。请查找下面的代码:

<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());
            });
            }
        }
    };
});

同一选项可以选择多次。

此代码中的问题是新克隆的选择框未预先选择，并且原始选择在更改后不处于未选择模式。这是jsfiddle

Answer 1

正如 @charlietfl 已经提到的，复制 DOM 元素在 Angular 世界中并不是真正正确的方法。

如果需要创建多个<select>元素，那么你可以使用ng-repeat创建它们。另外，基于 <options> 的选择在使用 ng-model 的模型上。这样，您只需克隆 Controller 中的元素即可复制 <select>元素。