I am not able to address the dynamic array in angular js

Question

I m trying to create arrays dynamically on click by calling showItem() function.However,the array created is empty.On calling showSubCat(); I am adding items to the array created through showItem().

<div class="form-group" ng-repeat="notice in notices_main">
  <div>
    <input type="button" value="addSubcat" ng-click="showSubCat($index);"></input>
  </div>
  <!--i m not able to address the array-->
  <div class="col-sm-8" ng-repeat="id in subCatArray{{index}}">
    <label class="control-label">simple input</label>
    <input type="text"></input>
  </div>
</div>
<input type="button" value="addItem" ng-click="showItem();"></input>

js code

$scope.showSubCat = function(index) {
  var newIndex = index + 1;
  var tempName1 = "subCatArray"+newIndex;

  var newIndex2 = $scope[tempName1].length + 1;

  //m pushing elemnts in subCatArray1 or subCatArray2....and so on based on the index passed.
  $scope[tempName1].push({'id':newIndex2});
}

$scope.showItem = function() {
  var newNodeIndex = $scope.notices_main.length + 1;
  var tempName1 = "subCatArray"+newNodeIndex;

  //array created would be subCatArray1 for the first time..and so on.
  $scope[tempName1] = [];
  $scope.notices_main.push({'notice':'noticeModel'+newNodeIndex});
  $scope.notices.push('noticeModel'+newNodeIndex);
}

Open console and check the error.

dfsq
– dfsq

2016-01-06 07:53:31 +00:00
Commented Jan 6, 2016 at 7:53 — dfsq
– dfsq, Commented Jan 6, 2016 at 7:53

dfsq · Accepted Answer · 2016-01-06 07:56:00Z

1

ngRepeat syntax is incorrect (expression) and should not use any {{ }}. Correct way to address dynamic scope property names would be using bracket notation:

ng-repeat="id in this['subCatArray' + index]"

Here, this points to $scope object.

Also, remove </input> - input tag doesn't not require closing tag.

answered Jan 6, 2016 at 7:56

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

freny fernandes Over a year ago

ng-repeat="id in subCatArray{{index}}" to be like ng-repeat="id in subCatArray1" and so on ....how do i achieve that

dfsq Over a year ago

I covered it in my answer: ng-repeat="id in this['subCatArray' + index]".

Santhy K · Accepted Answer · 2016-01-06 10:37:48Z

We can also use another main array and map with its key instead of multiple arrays. Here i used subCatArr as main array.Hope it will work

js

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.notices_main = [];
    $scope.notices =[];
    $scope.subCatArr = [];
    $scope.showSubCat = function(index) {
        var newIndex = index + 1;
        var tempName1 = "subCatArray"+index;

        var newIndex2 = $scope.subCatArr[tempName1].length + 1;

        //m pushing elemnts in subCatArray1 or subCatArray2....and so on based on the index passed.
        $scope.subCatArr[tempName1].push({'id':newIndex2});
    }

    $scope.showItem = function() {
        var newNodeIndex = $scope.notices_main.length + 1;
        var tempName1 = "subCatArray"+newNodeIndex;

        //array created would be subCatArray1 for the first time..and so on.
        $scope.subCatArr[tempName1] = [];
        $scope.notices_main.push({'notice':'noticeModel'+newNodeIndex, 'cnt': newNodeIndex});
        $scope.notices.push('noticeModel'+newNodeIndex);
    }
});

html

<body ng-app="myApp" ng-controller="myCtrl">
    <div class="form-group" ng-repeat="notice in notices_main">
        <div>
          <input type="button" value="addSubcat" ng-click="showSubCat(notice.cnt);"></input>
        </div>
        <!--i m not able to address the array-->

        <div class="col-sm-8" ng-repeat="id in subCatArr['subCatArray' + notice.cnt]">
          <label class="control-label">simple input</label>
          <input type="text"></input>
        </div>
    </div><br/>
    <input type="button" value="addItem" ng-click="showItem();"></input>
</body>

Collectives™ on Stack Overflow

I am not able to address the dynamic array in angular js

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related