角 - 動態增加

我有以下的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

角 - 動態增加

回答

相關問題