在订购后获取最后一个ng重复项'd

Getting the last ng-repeat item after it has been orderBy'd

本文关键字：ng 获取 最后一个      更新时间：2023-09-26

我试图生成一个术语及其定义的列表，但在每个字母部分的开头都放一个标题。IE

A

苹果

B

香蕉

要做到这一点，我有以下代码：

<div ng-repeat="definition in definitions">
   <div ng-if="firstLetterOfTerm(definitions[$index])!=firstLetterOfTerm(definitions[$index-1])">
      <h1>{{firstLetterOfTerm(definitions[$index])}}<hr></h1>
   </div>
   <div>{{definition.term}}</div>
</div>

如果订购了definitions，这将非常有效。但如果不是这样，这就行不通了。IE考虑列表

["Banana", "Apple"]

根据我目前的逻辑，这将产生以下列表：

A

香蕉

B

苹果

这是因为当我执行firstLetterOfTerm(definitions[$index])时，$index指向原始的无序列表。有什么方法可以让它正确定位$index吗？或者可能采用不同的方式来构建这个解决方案，从而产生相同的结果

注意：我不想预先对列表进行预排序，因为它可能很大。

您希望您的数组只为每个字母包含一个实例吗？如果定义包含[apple，香蕉，鳄梨]，它会为数组中的每个字符串打印第一个字母吗一苹果b香蕉一鳄梨

第一个firstLetterOfTerm（definitions[$index-1]）不会因为索引0-1不存在而返回undefined吗？Codepen`

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script type="text/javascript">
angular.module('myStatefulFilterApp', [])
 .controller('personController', ['$scope', function($scope) {
    $scope.definitions = ['apple0', 'banana0','apple1', 'banana1','apple2', 'banana2','apple3', 'banana3']
}])
.filter('startsWith', [function(){
  var start = function(array, letter){
    console.log(arguments)
    var newArray = new Array();
    angular.forEach(array, function(x){
      if (letter == x.charAt(0)) newArray.push(x)
    })
                    return newArray;
  }
  return start;
}])

 .filter('titleCaseFilter', [ function() {  
        var titleCaseFilter = function(array) {
        var newArray = new Array();
            angular.forEach(array, function(string){
            if (newArray.indexOf(string.charAt(0)) == -1)       newArray.push(string.charAt(0));
      });
  return newArray;
}
return titleCaseFilter;
}])

</script>
<div ng-app="myStatefulFilterApp" ng-controller="personController">
<div ng-repeat="definition in definitions | titleCaseFilter">
  <div>{{definition}}</div>
  <div ng-repeat="def in definitions | startsWith:definition">
    {{def}}
  </div>
</div>
</div>

`

相关文章：