角 - 动态增加

我有以下的NG-模型NG-型号名称：角 - 动态增加

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

而且我也有一个$scope变量叫$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>

与复制（）事件中，我克隆将原始元素整合到新的元素中。它可以工作，但我不能动态增加ng模型名称。所以，我想以下几点：

例如，如果$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>

更新 - 控制器动作

$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名称？

来源

2017-10-11 wpdaniel

复制如何工作？你能分享你的控制器代码并提供更多的细节吗？我不明白你需要做什么。 – Korte

我刚刚更新了代码w /控制器 – wpdaniel

实际上在输入元件分配了模型改变时数据块计数器的增加，但问题是，新的模型的值是未定义的，因为的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。

来源

2017-10-11 06:53:01 Korte

角 - 动态增加

回答

相关问题