Example

Question

我有一个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

Answer 1

HTML可以自己做到这一点：

<ol type="a">

查看MDN for <ol>

上的type部分

参见示例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

.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>

子弹列表与ng-repeat中的字母表

2 个答案:

Example