Question

我创建了一个包含多个标签的网站，其中一个是列出元素，它是“产品”标签。我有＆＃34; ng-repeat＆＃34;有问题，我想根据选项卡上的角度表填充HTML，它在第一次加载时工作正常，但如果我去到另一个标签，然后再次在产品标签上，＆＃34; ng-repeat＆＃34;再次重复，它与第一个重叠。

示例： 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

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

Answer 2

以下是如何处理多个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 3

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

当我遇到数组没有重置的问题时，我会在加载到范围之前使用angular.copy（）一个空的列表变量。这样我知道在添加任何内容之前数组是空的。

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

3 个答案: