angular ng-repeat in reverse

15 浏览
0 Comments

angular ng-repeat in reverse

在angular中如何获取一个反转的数组?\n我尝试使用orderBy过滤器,但它需要一个谓词(比如\'name\')来进行排序:\n


      {{friend.name}}
      {{friend.phone}}
      {{friend.age}}

\n有没有一种方法可以反转原始数组,而不进行排序。\n就像这样:\n


      {{friend.name}}
      {{friend.phone}}
      {{friend.age}}

0
0 Comments

问题的出现原因是在使用Angular的ng-repeat指令时,需要对数组进行逆序排列,但是在某些版本的Angular中,使用orderBy过滤器的逆序排列方式不起作用。解决方法是使用ng-repeat指令中的orderBy过滤器,并且不提供属性值,直接使用数组元素本身进行比较来实现逆序排列。具体解决方法如下:

ng-repeat="friend in friends | orderBy:'-'" 
或
ng-repeat="friend in friends | orderBy:'+':true"

这种解决方法更好,因为它不会修改数组并且不需要额外的计算资源(至少在我们的代码中是如此)。在这个的问题中,还提到了在Angular v1.3.0-rc.5及更高版本中才可以使用这种解决方法。

可能由于版本原因,有些用户在尝试使用这种解决方法时遇到了问题。但是根据官方文档的说明,从v1.3.0-rc.5版本开始就可以使用这种解决方法了。有用户在v1.3.4版本中成功使用了这种方法。

但是也有用户报告说,在v1.3.5甚至v1.4.0版本中仍然无法正常工作。可能这是一个Angular的bug,如果没有指定字段,正序排列方式可能不起作用。不过,无论如何,这个问题的关键是如何实现数组的逆序排列。

通过使用ng-repeat指令中的orderBy过滤器,并且不提供属性值,直接使用数组元素本身进行比较,可以实现数组的逆序排列。这种解决方法在较新的Angular版本中应该是可行的。

0
0 Comments

问题:angular ng-repeat in reverse的原因和解决方法

在Angular中,ng-repeat指令用于循环遍历一个数组或对象,并将其渲染为HTML元素。通常情况下,ng-repeat按照数组或对象的顺序循环遍历,但有时我们希望按照相反的顺序进行遍历。在这种情况下,我们可以使用ng-repeat的.reverse()方法来实现。

上面的代码展示了使用ng-repeat in reverse的示例。在这个示例中,ng-repeat使用alerts数组进行循环遍历,并通过.reverse()方法将其顺序反转。这样,alerts的最后一个元素将成为第一个元素,而第一个元素将成为最后一个元素。

然而,上述代码只适用于旧版本的Angular。在更新的版本中,推荐使用orderBy过滤器来实现ng-repeat in reverse的效果。

解决方法是使用以下代码片段:

ng-repeat="friend in friends | orderBy:'-'"

或者

ng-repeat="friend in friends | orderBy:'+':true"

这些代码片段使用orderBy过滤器并将参数设置为负号(-)或正号(+)来倒序循环遍历friends数组。

此外,还可以使用track by关键字来解决问题。下面的代码示例演示了如何在orderBy后使用track by来实现ng-repeat in reverse的效果:

ng-repeat="friend in friends | orderBy:'+': true track by $index"

在这个示例中,track by $index将根据数组的索引来跟踪每个元素。

本文介绍了ng-repeat in reverse问题的原因和解决方法。旧版本的Angular可以使用alerts.slice().reverse()来实现倒序遍历,但在更新的版本中推荐使用orderBy过滤器或track by关键字来实现相同的效果。这些解决方法可以帮助开发者按照相反的顺序遍历数组或对象,并在HTML页面中正确渲染。

0
0 Comments

问题:angular ng-repeat in reverse的出现原因和解决方法

在Angular中,ng-repeat是用于重复渲染HTML元素的指令。它可以将一个数组中的每个元素重复地渲染到HTML页面上。默认情况下,ng-repeat按照数组的顺序进行渲染,但有时我们可能希望按照相反的顺序进行渲染。

出现原因:

默认情况下,ng-repeat不支持直接逆序渲染数组元素。因此,我们需要使用一种方法来实现逆序渲染。

解决方法:

一种解决方法是使用自定义过滤器。下面是一个自定义过滤器的示例代码:

app.filter('reverse', function() {
  return function(items) {
    return items.slice().reverse();
  };
});

上述代码定义了一个名为'reverse'的过滤器,它接受一个数组作为输入,并返回一个逆序排列的新数组。然后,我们可以在ng-repeat指令中使用这个过滤器来实现逆序渲染:

<div ng-repeat="friend in friends | reverse">{{friend.name}}</div>

上述代码将会按照逆序渲染friends数组中的每个元素。

需要注意的是,使用items.reverse()会修改原数组,而不仅仅是创建一个新数组并返回。为了避免修改原数组,我们可以在过滤器中使用items.slice().reverse()来创建一个新的逆序数组。

此外,为了确保输入的是一个数组,我们可以在过滤器中添加if (!angular.isArray(items)) return false;来验证输入的是否为数组。

如果希望更加灵活地处理不同类型的输入,我们可以根据需要进一步定制过滤器。例如,可以添加对字符串的逆序处理。

需要注意的是,有人建议在输入为null的情况下,返回原始值而不是空数组。因此,可以使用return items ? items.slice().reverse() : [];来处理这种情况。

通过使用自定义过滤器,我们可以实现在ng-repeat中逆序渲染数组元素的功能。为了避免修改原数组,我们可以使用items.slice().reverse()来创建一个新的逆序数组。同时,我们还可以根据需要进一步定制过滤器,以处理不同类型的输入。

0