【问题标题】：Bullet list with alphabet in ng-repeatng-repeat 中带有字母的项目符号列表
【发布时间】：2015-01-01 01:58:35
【问题描述】：

我有一个 ng-repeat 块，如下所示，我不希望代码中的占位符 [[THE ALPHABET]] 像列表中的项目符号一样呈现 a, b, c, d，按相应的顺序。我将始终有 4 个值。实现这一目标的最佳方法是什么？

<div class="list no-image">
      <label class="item item-radio" ng-repeat="a in question.answer">
      [[THE ALPHABET]]. 
      <div class="item-content">
      {{ a.option }}
      </div>   
      </label>
</div>

所以结果应该如下所示。

a. option 1
b. option 2
c. option 3
d. option 4

【问题讨论】：

标签： javascript angularjs ng-repeat alphabet

【解决方案1】：

您可以创建自定义过滤器，如下所示：

.filter('numberToAlphabet', function(){
    return function(number){
        return String.fromCharCode(number+97);
    }
})

在您的代码中，您可以像这样使用它：

<div class="list no-image">
      <label class="item item-radio" ng-repeat="a in question.answer">
      {{$index | numberToAlphabet}}. 
      <div class="item-content">
      {{ a.option }}
      </div>   
      </label>
</div>

Example

【讨论】：

【解决方案2】：

HTML 可以自己做到这一点：

<ol type="a">

查看MDN for <ol> 上的type 部分

查看示例：

angular.module('test', [])
.controller('MainCtrl', function ($scope) {
  $scope.list = ['asdf','asdfasdf','asdfasdfasdf','adf','asdfsdf'];
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="MainCtrl">
  <ol type="a">
    <li ng-repeat="item in list">{{item}}</li>
  </ol>
</div>

【讨论】：

+1 我不建议这样做的唯一原因是，将自定义 css 样式应用于字母可能非常具有挑战性。此外，似乎 OP 有一个非常特殊的标记。然而，这个解决方案解决了这个问题，同时在语义上提供了更好的标记。