角度方向操纵ng使用全局开关重复项目

这有一个很好的解决方案 plunker :

这是一个包含两个“列表”项的示例。

<div ng-repeat="list in lists">
  <div ng-mouseleave="list.expand = false" ng-mouseover="list.expand = true" ng-repeat="item in list">
    <div ng-if="$first">
      List n° {{listIndex}}
    </div> 
    <div ng-show="$index < 3 || list.expand">
      {{item.value}}
    </div>
  </div>
 </div>

我与 ng-mouseleave 和 ng-mouseover 设置动态属性的 list.exand 到 true 或 false .

值部分的显示取决于您想要的限制(可以在范围中的变量中定义)以及列表是否应该展开。

ng-show="$index < 3 || list.expand"

告诉我你是否认为这能满足你的需求。无论如何,您需要根据指令的工作方式对其进行调整。

如果你想帮助我整合这一点,请分享你的指令代码(如果你在punker中放一个示例,那就更好了),我会尽我所能。

希望有帮助

编辑:

我花了一些时间来实现这一指令,现在就是了。

查看此中的用法 plunker

我提出了两个应该这样使用的指令:

<div ng-repeat="(listIndex,list) in lists">
   <div compact-list>
     <div ng-click="getClExpand()" ng-repeat="item in list">
      <div ng-if="$first">
        List n° {{listIndex}}
      </div> 
      <div limit-to="2">
        {{item.value}}
      </div>
    </div>
   </div>
 </div>

这个 compact-list 指令添加 ng-mouseenter , ng鼠标离开 指令。

这个 limit-to 添加 ng-show 根据你给的数字。

压缩列表 指令

app.directive('compactList', function ($compile) {
   return {
      restrict: 'A',
      controller:function($scope){
        $scope.clExpand = false;
      },
      replace: false,
      link: function link(scope,element, attrs) {
        //don't forget to remove the directive before the compile to avoid infinite digests.
        element.removeAttr("compact-list");
        element.attr("ng-mouseenter","clExpand = true");
        element.attr("ng-mouseleave","clExpand = false");
        $compile(element)(scope);
      }
    }; 
  });

限制为 指令:

app.directive('limitTo', function ($compile) {
    return {
      restrict: 'A',
      replace: false,
      //You can't use limit-to withouth compact-list
      require:"^^compactList",
      link: function link(scope,element, attrs) {
        element.attr("ng-show","$index < "+attrs.limitTo+" || clExpand");
        //don't forget to remove the directive before the compile to avoid infinite digests.
        element.removeAttr("limit-to");
        $compile(element)(scope);
      }
    };  
});

优点:您可以通过将限制设置为指令来选择要隐藏的项目部分。(如果要隐藏项目的描述,请将其放在description div中;如果要隐藏整个项目,请将它放在整个项目div中。)

希望有帮助。

编辑:

(作者:andimeier)

添加 scope=true 属性设置为 压缩列表 指令,它仍然更好(见我下面的评论)。所以 压缩列表 将是:

压缩列表 指令

app.directive('compactList', function ($compile) {
   return {
      restrict: 'A',
      scope: true,
      controller:function($scope){
        $scope.clExpand = false;
      },
      replace: false,
      link: function link(scope,element, attrs) {
        //don't forget to remove the directive before the compile to avoid infinite digests.
        element.removeAttr("compact-list");
        element.attr("ng-mouseenter","clExpand = true");
        element.attr("ng-mouseleave","clExpand = false");
        $compile(element)(scope);
      }
    }; 
  });