CODEWITHSUNDEEP
javascripthtmlangularjs
user1751287
user1751287

Reputation: 501

match parent and inner index within nested ng-repeats while passing duplicate values

I am trying to pass duplicate values in different formats but can not match parent and inner indexes hence I get Error: [ngRepeat:dupes]. that said, I pass object with multiple properties among which I have tags...see below

vm.hotels returns objects like below

0:object
  tags:"tag1|tag2|tag3"
1:object
  tags:"tag1|tag2|tag3"

vm.hTags is an array that matches each object like below

["tag1", "tag2", "tag3"]

within my controller I split tags and push then into an array within a loop which I pass to the view. this works as it should but I can not make it work with indexes within the view. below are nested ng-repeats

<li ng-repeat="item in vm.hotels track by $index">
    <ul>
        <li ng-repeat="tag in vm.hTags[$index]">
            {{tag}}   
        </li>
    </ul>
<li>

I tried to use vm.hTags[$parent.$index] but it does not work as duplicate error is thrown due to indexes. Perhaps I need to create some custom tracking property ?

Upvotes: 0

Views: 266

Answers (3)

Manikandan Velayutham
Manikandan Velayutham

Reputation: 2228

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

app.controller('MainCtrl', function($scope) {
  var vm = this;
  vm.hotels = [{
    tags: "tag1|tag2|tag3"
  }, {
    tags: "tag4|tag5|tag6"
  }]
  vm.hTags = [["tag1", "tag2", "tag3"]];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>

<body ng-app="myApp" ng-controller="MainCtrl as vm">
  <div ng-repeat="key in vm.hotels">
    <div ng-repeat="tag in vm.hTags[$index]">
      {{tag}}
    </div>
  </div>
  <br>
  <div ng-repeat="(key, value) in vm.hotels">
    <div ng-repeat="tag in vm.hTags[key]">
      {{tag}}
    </div>
  </div>
</body>

Upvotes: 1

tanmay
tanmay

Reputation: 7911

The problem with nested ng-repeat is that is that if you use $index for both child and parent, it might conflict. In order to avoid it, we can use it by giving name. Like this

ng-repeat="(hotelIndex, item) in vm.hotels ..."

I don't know how you want to render it but here's a sample example of that:

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

app.controller('MainCtrl', function($scope) {
  var vm = this;
  vm.hotels = [{
    tags: "tag1|tag2|tag3"
  }, {
    tags: "tag4|tag5|tag6"
  }]
  vm.hTags = [["tag1", "tag2", "tag3"], ["tag4", "tag5", "tag6"]]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="MainCtrl as vm">
  <div ng-repeat="(hotelIndex, item) in vm.hotels track by hotelIndex">
    <div ng-repeat="tag in vm.hTags[hotelIndex]">
      {{tag}}
    </div>
    <br>
  </div>
</body>

Upvotes: 1

Srigar
Srigar

Reputation: 1688

Please find the code change below,

<li ng-repeat="item in vm.hotels track by $index">
    <ul>
        <li ng-repeat="tag in vm.hTags[$index]">
            {{tag}}   
        </li>
    </ul>
<li>

Check and let me know.You made a syntax error

Upvotes: 0

Related Questions