javascript - Angular - 动态增加 ng-model 名称

Question

我有以下 ng-model:

<input class="text__Right" type="datetime" ng-model="formData.MODELNAME"  ng-init="formData.MODELNAME =  testDate" readonly>

我还有一个名为 $blockCounter 的 $scope 变量

<div class="list list-inset block" id="block{{ blockCounter }}">
    <div class="item item-divider">
       Test
        <div class="dynamic-add">
            <a class="button icon-left button-dark button-small button__Icon_Vertical add" href="javascript: void(0)" ng-click="copy($event)" data-block="block{{ blockCounter }}">
                <i class="icon ion-ios-plus-outline"></i> New
            </a>
            <a class="button icon-left button-dark button-small button__Icon_Vertical remove" href="javascript: void(0)" ng-click="remove($event)" data-block="block{{ blockCounter }}">
                <i class="icon ion-ios-minus-outline"></i> Remove
            </a>
            <a class="button icon-left button-dark button-small button__Icon_Vertical" href="javascript: void(0)" ion-datetime-picker ng-model="datetimeValue" ng-click="getFormDataModel('MODELNAME{{ blockCounter }}')">
                <i class="icon ion-ios-clock-outline"></i> Date
            </a>
        </div>
    </div>
</div>

通过 copy() 事件，我将原始元素克隆到新元素中。它有效，但我无法动态增加 ng-model 名称。所以我想要以下内容:

例如，如果$blockCounter = 2:

<input class="text__Right" type="datetime" ng-model="formData.MODELNAME2"  ng-init="formData.MODELNAME2 =  testDate" readonly>

我尝试了以下方法，但不起作用:

<input class="text__Right" type="datetime" ng-model="formData.MODELNAME{{ blockCounter }}"  ng-init="formData.MODELNAME{{ blockCounter }} =  testDate" readonly>

或者:

<input class="text__Right" type="datetime" ng-model="formData.MODELNAME[blockCounter]"  ng-init="formData.MODELNAME[blockCounter] =  testDate" readonly>

更新 - Controller 操作

$scope.copy = function($event) {
        if ($event.currentTarget && $event.currentTarget.attributes['data-block'])
            var block = $event.currentTarget.attributes['data-block'].value;

            var original = document.getElementById('block' + $scope.blockCounter);
            var cloneBlock = document.getElementById('cloneBlockA');
            var clone = original.cloneNode(true);

            // var original = angular.element( document.querySelector( '#block' + $scope.blockCounter) );
            // var wEl = angular.element( document.querySelector( '#block' + $scope.blockCounter) );
            // var compiledElement = $compile(wEl.clone())($scope);

            console.log(original);

            // var clone = original.cloneNode(true);
            // var clone = $compile(original.cloneNode(true))($scope);
            $scope.blockCounter++;
            clone.id = "block" + $scope.blockCounter;
            cloneBlock.appendChild(clone);
            console.log($scope.blockCounter);

            switch($scope.blockCounter) {
                case 0:
                    $scope.addButton = true;
                    $scope.removeButton = false;
                    break;
                case 1:
                    $scope.addButton = true;
                    $scope.removeButton = true;
                    break;
                case 2:
                    $scope.addButton = true;
                    $scope.removeButton = true;
                    break;
                case 3:
                    $scope.addButton = false;
                    $scope.removeButton = true;
                    break;
                default:
                    $scope.addButton = true;
                    $scope.removeButton = false;
            }

            // var compiledElement = $compile(wEl.clone())($scope);
        // iEl.append(compiledElement);
        };

如何动态增加 ng-model 名称？

Answer 1

实际上，当 block 计数器增加时，在输入元素处分配的模型会发生更改，但问题是新模型的值未定义，因为ng-init仅在元素第一次呈现时运行。为了解决这个问题，您必须在每次 blockCounter 时为新模型分配一个值。增加。

  $scope.testDate = new Date();
  $scope.blockCounter = 0;

  $scope.formData = {
    MODELNAME:{}
  };

  $blockCounter = 0;

  $scope.onBlockCounterIncrease = function() {
    $scope.blockCounter++;
    $scope.formData.MODELNAME[$scope.blockCounter] = $scope.testDate;
  }

这是一个working fiddle .