ng-repeat triggers every time i reload my view

Question

I'm creating a website with multiple tabs, and one of them is listing elements, it's the Product tab. I've got a problem with "ng-repeat", I want to fill a HTML depending on a table of table in angular on the tab, it works fine on the first load, but if I go to another tab and then go again on the product tab, the "ng-repeat" repeats once more and it stacks with the first one.

Example: Firstload: an apple and a strawberry are loaded fine. Secondload: I now have apple strawberry and apple strawberry And so on.

 <slick dots="true" prev-arrow="null" next-arrow="null" init-onload="true" data="productsTab">
    <div class="productsPage scrollBar"  ng-repeat="tab in productsTab">
        <div class="productsProduct" ng-repeat="product in tab">
            <div class="productsProductTitle">{{product.name}}</div>
        </div>
    </div>
</slick>

I can also say that I load my data from a factory that I get in controller this way:

productsFactory.build().then(function(facto) {
    $scope.productsTab = facto;
});

Hope you can help me!

score 1 · Accepted Answer · edited May 23 '17 at 12:33

1

I think your problem is that init-onload. I am not sure what it does, but if it triggers the call to the controller in some way, it also triggers the promise every time you go back to the tab. You can cache the results from the promise inside the service. Here's an article from this site on how to cache promises: Caching a promise object in AngularJS service Hope this will help.

edited May 23 '17 at 12:33

Community

1
1

answered Jun 27 '16 at 13:45

Iulia Mihet

650
1
10
34

I'm actually using a factory that returns a promise, I just tried using three independants ng-repeat instead of ng-repeat inside ng-repeat, I also removed the init-onload that I took from the slick documentation, and it still works the first time, but it stacks after. – Mumrau Jun 27 '16 at 14:11
1

You were right, it's my factory not resetting but adding more and more data inside my tables! I solved this basically with resetting to empty at the beginning of my factory, but I'll try out the link you send me, it should works! Thanks :) – Mumrau Jun 27 '16 at 14:26

score 0 · Answer 2 · answered Jun 27 '16 at 13:10

Here is example how to handle multiple ng-repeats, I hope this will help you.

http://plnkr.co/edit/TfGMm1SgpRmgFSTuTuE0?p=preview

 <script>
      var app=angular.module('myapp',[])
      app.controller('demo',function($scope){
        $scope.products={
          product:[{
            name:'abc'
          }]
        }
      })
    </script>
  </head>

  <body ng-app="myapp" ng-controller="demo">
    <div ng-repeat="product in products">
      <div ng-repeat="p in product">
        <span>{{p.name}}</span>
      </div>
    </div>
  </body>

Thanks but the problem isn't with the multiple ng-repeats, this works fine! It adds my products on my page, but on the second load, it re-adds them, so every product is on my page twice, and then three times, etc... — Mumrau, Jun 27 '16 at 13:39

score 0 · Answer 3 · answered Jun 27 '16 at 14:13

0

I noticed from the docs I found here https://github.com/vasyabigi/angular-slick that there are no parenthesis on on-init=true. Not sure if that matters.

When I have issues with arrays not resetting I use angular.copy() an empty list variable before loading to the scope. That way I know the array is empty before I add anything to it.

answered Jun 27 '16 at 14:13

Mickers

1,367
1
20
28

It was indeed a problem of non-empty arrays but that was inside my factory, your answer gave me that idea, and it was the problem, thanks! – Mumrau Jun 27 '16 at 14:27

ng-repeat triggers every time i reload my view

3 Answers3