javascript - Angular : how can I order ng-repeat by array order?

Question

问题

有没有办法指示 Angular 订购 ng-repeat按重复的源数据顺序？

如果没有，我还能如何使用 ng-repeat的orderBy在容器指令的上下文中？有关我的用例的详细信息如下。

<小时/>

信息

我遇到了一种情况，指令包装了任意项目列表。具体来说，绑定(bind)到 ng-repeat 的数据是较长列表的子数组。在我的特定情况下，我有一个指令包装了另一个使用 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 之外的某个 Controller 。的 Controller 。澄清一下，generic-list-container 的模板没有有 ng-repeat，因为这会降低指令的通用性。相反，ng-repeat 位于实际使用该指令的 page 模板中。

我实际上在指令的 Controller 逻辑中有我想要的排序逻辑，但是我不确定如何向 Angular 提供该信息。

理想情况下，有一种方法可以告诉 Angular 按数组顺序或数组索引进行排序，但我不确定在这种情况下如何执行此操作。

示例代码

请注意，我发布此内容是为了让您了解我想要的内容，这不是完整的图片，但我认为完整的图片对于代码来说不是必要的。

  function slider() {

    return {
      restrict: 'AE',
      transclude: true,
      templateUrl: 'my-template.html',
      controller: 'SliderCtrl',
      controllerAs: 'vm',
      bindToController: {
        show: '@',
        index: '@',
        scrollBy: '@'
      },
      scope: {},
      link: linkFunc
    };

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

      if (angular.isUndefined(ctrl.show)) {
        ctrl.show = 4;
      } else {
        ctrl.show = Math.abs(ctrl.show);
      }

      if (angular.isUndefined(ctrl.index)) {
        ctrl.index = 48;
      } else {
        ctrl.index = Math.abs(ctrl.index);
      }

      if (angular.isUndefined(ctrl.scrollBy)) {
        ctrl.scrollBy = 1;
      } else {
        ctrl.scrollBy = Math.abs(ctrl.scrollBy);
      }

      //wait for ng-repeat to be ready
      var unbind = $scope.$watch('vm.ready', function (newVal, oldVal) {
        if (newVal === true) {

          // active is a subarray of ctrl.items
          ctrl.active = [];

          //find subarray start, end indexes

          var start = ctrl.index + ctrl.show;
          var len = ctrl.items.length;

          //add items to the subarray
          for (var i = ctrl.index; i < start; i++) {
            ctrl.items[i%len].slide.active = true;
            ctrl.active.push(ctrl.items[i % len]);
          }

          //sort the sub array???
          if (start >= len) {
            ctrl.active.sort(function (a, b) {
              return b.index - a.index;
            });
          }

          unbind();
        }
      });

    }

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 是您可以定义的范围变量。