Angular - dynamisch ng-Modellname

Question

ich habe folgende ng-Modell erhöhen:

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

Und ich habe auch eine $scope Variable namens $blockCounter

<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> 

Mit der Kopie() Ereignis, das ich klonen das ursprüngliche Element in das neue. Es funktioniert, aber ich kann den ng-Modellnamen nicht dynamisch erhöhen. Deshalb möchte ich folgendes:

Zum Beispiel, wenn $blockCounter = 2:

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

ich folgendes versuchen, aber nicht funktioniert:

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

oder:

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

UPDATE - Controller-Aktion

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

Wie kann ich den Namen ng-model dynamisch erhöhen?

Answer 1

Eigentlich das Modell am Eingabeelement zugeordnet wird, wenn Blockzähler erhöht sich verändert, aber das Problem ist, dass der Wert des neuen Modells nur das erste Mal seit der ng-init Läufe undefiniert ist das Element rendert. Um dieses Problem zu beheben, müssen Sie dem neuen Modell jedes Mal einen Wert zuweisen, wenn der Wert blockCounter ansteigt.

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

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

    $blockCounter = 0; 

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

Hier ist ein working fiddle.