A

Question

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

A

苹果

乙

香蕉

为此，我有以下代码：

<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

香蕉

乙

苹果

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

注意：我不想事先预先列出清单，因为它可能非常大。

Answer 1

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

也不会第一个firstLetterOfTerm（定义[$ index-1]）返回undefined为索引0 - 1不存在？ 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>

`

在订购之后获取最后一个ng-repeat项目＆＃39; d

A

乙

A

乙

1 个答案: