Angular：如何按数组顺序命令ng-repeat？

Question

问题

有没有办法指示Angular通过重复的源数据订单订购ng-repeat？

如果没有，我怎样才能在容器指令的上下文中使用ng-repeat的{​​{1}}？我的用例详情如下。

信息

我有一种情况，指令包装任意项目列表。具体而言，绑定到ng-repeat的数据是较长列表的子数组。在我的特定情况下，我有一个指令包含另一个使用orderBy的指令。如，

ng-repeat

现在假设<generic-list-container> <youtube-item ng-repeat="video in vm.videos"></youtube-item> </generic-list-container> 在订购子列表时有一些特定的规则，并且它可以接受任何子列表（当然在合理范围内）。

在这种情况下，我可能不想使用generic-list-container，至少在我理解的情况下，因为它将排序逻辑留给了| orderBy:控制器以外的某个控制器。为了澄清，generic-list-container的模板不具有ng-repeat，因为这会降低指令的通用性。相反，ng-repeat位于 page 模板中，其中实际使用了该指令。

我实际上在指令的控制器逻辑中有我想要的顺序逻辑，但是我不确定如何给出角度信息。

理想情况下，我可以通过数组顺序或数组索引告诉Angular按顺序排序，但我不确定如何在此上下文中执行此操作。

示例代码

抬头，我发布这篇文章是为了让你体会到我想要的东西，这不是完整的图片，但我不认为代码需要全图。

generic-list-container

Answer 1

我认为您正在寻找创建custom angular filter。这样做很简单。

创建一个这样的过滤器：

.filter('sortArray', function() {
  return function(array, sortOrder) {
    return array.sort(...add some function here that sorts on sortOrder);
  };
})

然后您可以像这样使用过滤器：

<generic-list-container>
    <youtube-item ng-repeat="video in vm.videos | sortArray : vm.sortKind"></youtube-item>
</generic-list-container>

其中vm.sortKind是您可以定义的范围变量。

Answer 2

我所描述的问题的解决方案是隐藏已转换的ng-repeat列表，并在指令模板中使用自定义transclude指令来呈现子数组。详情如下。

提供这个想法的Angular UIB项目的大帽子提示。

示例generic-list-container模板：

<div class="generic-list-container">
    <div class="generic-list-container-content">
        <ol class="generic-list-container-list">
             <!-- render the subarray... -->
            <li ng-repeat="item in subarray" class="generic-list-item">
                <div generic-list-container-transclude="item">
                </div>
            </li>
        </ol>
        <!-- ...and hide the full list -->
        <ol class="generic-list-container-hidden" style="display: none;" ng-transclude>
        </ol>
    </div>
</div>

示例generic-list-container-transclude指令：

  function genericListContainerTransclude() {

    return {
      restrict: 'A',
      require: '^genericListContainer',
      link: linkFunc
    };

    function linkFunc($scope, $element, $attrs) {

      var item = $scope.$eval($attrs.genericListContainerTransclude).item;

      item.$transcludeFn(item.$parent, function (contents) {
        angular.forEach(contents, function (node) {
          $element.append(node);
        });
      });

    }

  }

最后注意事项：将ng-repeat＆＃39; d项包装在指令中，并在其指令定义中包含以下行：

  $scope.$transcludeFn = transclude;