AngularJS只在ng-repeat中显示last Element

AngularJS only shows last Element in ng-repeat

本文关键字：last Element 显示 只在 ng-repeat AngularJS      更新时间：2023-09-26

我有一个奇怪的行为使用flexslider渲染一堆画廊。如下所示，我得到了一个由几个对象组成的数组，这些对象构成了一个图像数组。当我"渲染"这些图库时，所有的图库都出现了，但只有最后一个图库显示了它的图像。在所有图库中，显示特定图片数量的指示器，以及标题和链接，都是正确的，但是缺少图片。

我做错了什么吗?下面是我的代码:

$scope.galleries = [{title: 'gallery1', 'link': 'http://...', elements: 
                        ['img/img1.jpg','img/img2.jpg']},
                    {title: 'gallery2', 'link': 'http://...', elements: 
                        ['img/img3.jpg','img/img4.jpg']}];

我想用指令和ng-repeat显示每个图库。该指令应该显示标题并使用flexslider(https://github.com/thenikso/angular-flexslider)渲染图库。指令:

.directive('gallery', function() {
      return {
          restrict: 'A',
          templateUrl: 'views/gallery.html',
          scope: {
              gallery: '='
          },
          link: function(scope, element, attrs) {
              // first generate html, the
              // set content here
              scope.link = scope.gallery.link;
              scope.title = scope.gallery.title;
              scope.elements = angular.copy(scope.gallery.elements);
              scope.num = scope.gallery.elements.length;
          }
      };
  }

模板:

<a ng-href="{{link}}" target="_blank" ng-bind="title"></a>
<div class="gallery">
  <div class="flexslider">
    <div class="slides-control">
    <a href="" ng-click="prevSlideshow()" class="prev">
    <
      </a>
      <span class="current_pos">1</span>
      /
      <span ng-bind="num" class="total"></span>
        <a href="" ng-click="nextSlideshow()" class="next">
        >
      </a>
    </div>
        <ul ng-click="nextSlideshow()" class="slides" slideshow="false" control-nav="false" direction-nav="false" flex-slider slide="element in elements">
            <li><img ng-src="{{element}}" alt=""></li>
        </ul>
  </div>
  <a ng-href="{{link}}" target="_blank"><h4>more</h4></a>
<h5>---------------------------------------</h5>
</div>

最后我怎么称呼它:

<ul class="publications" >
    <li ng-repeat="gallery in galleries">
        <div gallery="gallery"></div>
    </li>
</ul>

我有一些好消息和一些坏消息…

好消息你的代码没有做错什么

坏消息你的代码没有做错什么

你试图使用FlexSlider的指令有一些限制，如目前所写的。您只看到一组数据呈现的原因是因为slide属性和指令内所有其他逻辑的关联被写入compile (参见flex-slider.js中的第11行)函数时，与指令的scope相关的任何内容都应该在link函数中执行。

选项>
  1. 联系指令的开发者并提交bug报告
  2. 在指令
    3. 中自行解决问题
  3. 编写自己的组件

这是我创建的plnkr 这个plnkr显示了一个ng-repeat，我添加它是为了说明你的代码应该根据指令的创建方式工作。

注意开发人员可能从未遇到过这种情况，因为创建它的意图可能是一次只有一个实例。

感谢大家提出这个问题并分析它!这确实是angular-flexslider的指令问题。在http://github.com/thenikso/angular-flexslider/issues/20

中已经解决了这个问题

从AngularJs开始的用户的一般信息:

有时你使用ng-repeat下拉菜单

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Language</a>
<ul class="dropdown-menu" ng-repeat="language in languages">
    <li>
        <a href="#">{{ language.name | translate }}</a>
    </li>
</ul>

别忘了ng-repeat也会重复ul。输出为:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Language</a>
    <ul class="dropdown-menu ng-scope" role="menu" ng-repeat="language in languages">
        <li><a href="#" ng-click="changeLanguage(language.abv)" class="ng-binding">French</a></li>
    </ul>
    <ul class="dropdown-menu ng-scope" role="menu" ng-repeat="language in languages">
        <li><a href="#" ng-click="changeLanguage(language.abv)" class="ng-binding">English</a></li>
    </ul>
</li>

我们可以看到两个ul下拉，这是不好的，这就是为什么你只能看到数组的最后一个元素。正确的方法是:

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Language</a>
<ul class="dropdown-menu">
    <li ng-repeat="language in languages">
        <a href="#">{{ language.name | translate }}</a>
    </li>
</ul>

希望有帮助!

相关文章：