每次重新加载视图时 ng-repeat 都会触发

Question

我正在创建一个包含多个选项卡的网站，其中之一是列出元素，它是“产品”选项卡。 "ng-repeat"有问题，我想根据选项卡上angular中table的table填充一个HTML，它工作正常在第一次加载时，但如果我转到另一个选项卡，然后再次转到产品选项卡，"ng-repeat" 会再次重复并与第一个选项卡叠加。

示例： Firstload：一个苹果和一个草莓都装好了。 Secondload：我现在有苹果草莓和苹果草莓等等。

 <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>

我也可以这样说，我从控制器中获取的工厂加载数据：

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

希望你能帮助我！

Answer 1

下面是如何处理多个 ng-repeats 的示例，希望这对您有所帮助。

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>

Answer 2

我认为你的问题是init-onload。我不确定它做了什么，但如果它以某种方式触发对控制器的调用，它也会在你每次返回选项卡时触发承诺。您可以在服务中缓存 promise 的结果。这是该站点上有关如何缓存承诺的文章： Caching a promise object in AngularJS service 希望这会有所帮助。

Answer 3

我从此处 https://github.com/vasyabigi/angular-slick 找到的文档中注意到 on-init=true 上没有括号。不确定这是否重要。

当我遇到无法重置数组的问题时，我会在加载到作用域之前使用 angular.copy() 一个空列表变量。这样我就知道在向它添加任何内容之前数组是空的。

每次重新加载视图时 ng-repeat 都会触发

ng-repeat triggers every time i reload my view

angularjs

ng-repeat

slick.js