CODEWITHSUNDEEP
javascriptangularjs
wpdaniel
wpdaniel

Reputation: 762

Angular - dynamically increase ng-model name

I have the following ng-model:

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

And I also have an $scope variable called $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>

With the copy() event I clone the original element into the new one. It works, but I can't increase dynamically the ng-model name. So I want the following:

For example if $blockCounter = 2:

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

I try the following, but not working:

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

or:

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

UPDATE - Controller action

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

How can I dynamically increase the ng-model name?

Upvotes: 0

Views: 66

Answers (1)

korteee
korteee

Reputation: 2692

Actually the model assigned at input element is changed when block counter increases, but the problem is that the value of the new model is undefined since the ng-init runs just the first time the element renders. To overcome this issue you have to assign a value to the new model each time the blockCounter increases.

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

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

  $blockCounter = 0;

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

Here's a working fiddle.

Upvotes: 1

Related Questions