ng-repeat inside ng-repeat $index

Question

Hi it's my first time here and I'm new to Angularjs, I would be thankful if someone here could help me figure out the problem in my code. I have nested ng-repeat like so (a user may have multiple comptes and a compte may also have multiple mandats, when I click AddMandatItem it adds a <div> which is added using an <ng-repeat> , but when I click AddMandatItem for the second time (on another compte) it adds 2 items (the first one added before + the second). can I refer to parent compte so that my <ng-repeat> add the number of mandats I want to add for each compte?

<button ng-click="addCompteItem()">Add a compte</button>
<div ng-repeat="compteItem in compteItems track by $index">
  <h2>
   <strong>Compte {{$index + 1}}</strong>
  </h2>
  <label>Id</label>
  <input type="text" ng-model="compte[$index].id" />
  <label>Unique reference</label>
  <input type="text" ng-model="compte[$index].uniqueRef" />


  <div ng-repeat="mandat in mandats track by $index>
  <label>Id</label>
  <input ng-model="compte[$parent.$index].mandat[$index].id" />

<div>
<button ng-click="addMandatItem($parent.$index,$index)">Add a mandat for          that compte
</button>
 </div>

app.js:

$scope.compteItems = [{}];
$scope.addCompteItem = function(){
    $scope.compteItems.push({});
};

$scope.mandats=[];
$scope.addMandat = function(i,j){
        console.log(i);
        console.log(j);
        $scope.mandats.push([]);
        var newMandat = {};
        $scope.mandats[i][j]=newMandat;
};

Answer 1

You can use Some variables for Indexes and you can use. Refer AngularJS Documentation for more details

<button ng-click="addCompteItem()">Add a compte</button>
<div ng-repeat="compteItem in compteItems" ng-init="parentIndex = $index">
  <h2>
   <strong>Compte {{parentIndex + 1}}</strong>
  </h2>
  <label>Id</label>
  <input type="text" ng-model="compte[parentIndex].id" />
  <label>Unique reference</label>
  <input type="text" ng-model="compte[parentIndex].uniqueRef" />


  <div ng-repeat="mandat in compte[parentIndex].mandat" ng-init="childIndex = $index">
  <label>Id</label>
  <input ng-model="compte[parentIndex].mandat[childIndex].id" />

<div>
<button ng-click="addMandatItem(parentIndex,childIndex)">Add a mandat for          that compte
</button>
 </div>

Answer 2

As per your requirements, I believe you wanted to do something like this:

HTML:

<button ng-click="addCompteItem()">Add a compte</button>
    <div ng-repeat="compteItem in compteItems track by $index">
      <h2>
       <strong>Compte {{$index + 1}}</strong>
      </h2>
      <label>Id</label>
      <input type="text" ng-model="compteItem.id" />
      <label>Unique reference</label>
      <input type="text" ng-model="compteItem.uniqueRef" />


      <div ng-repeat="mandat in compteItem.mandats track by $index">
      <label>Id</label>
      <input ng-model="mandat.id" />

    <div>
    <button ng-click="addMandatItem(compteItem)">Add a mandat for that compte
    </button>
     </div>

JS:

$scope.compteItems = [{}];
    $scope.addCompteItem = function(){
        $scope.compteItems.push({mandats:[]});
    };

    $scope.addMandat = function(compteItem){           
            var newMandat = {};
            compteItem.mandats.push(newMandat);
    };

Answer 3

I found this solution, I share it to help someone else having the same issue: here is my App.js

$scope.addMandat = function(i){
        if($scope.compteItems[i].mandats==null){
            $scope.compteItems[i].mandats=[];
        }
        console.log(i);
        var newMandat = {};
        $scope.compteItems[i].mandats.push(newMandat);
};

And :

<button ng-click="addCompteItem()">Add a compte</button>

<div ng-repeat="compte in compteItems" ng-init="parentIndex = $index">
  <h2>
   <strong>Compte {{parentIndex + 1}}</strong>
  </h2>
  <label>Id</label>
  <input type="text" ng-model="compte[parentIndex].id" />
  <label>Unique reference</label>
  <input type="text" ng-model="compte[parentIndex].uniqueRef" />


  <div ng-repeat="mandat in compte.mandats" ng-init="childIndex = $index">
  <label>Id</label>
  <input ng-model="compte.mandat[childIndex].id" />
  </div>
  <div>
  <button ng-click="addMandatItem(parentIndex)">Add a mandat for that compte
  </button>
 </div>
 </div>