Bullet list with alphabet in ng-repeat

Question

I have an ng-repeat block as below, I wan't the placeholder [[THE ALPHABET]] in code to render a, b, c, d like bullets for the list, in respective order. I will have 4 values always. What is the best way to achieve this?

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

So the result should be something like below.

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

Answer 1

HTML can do this itself:

<ol type="a">

Check out the type section on MDN for <ol>

See example:

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>

Answer 2

You could create your custom filter, like this:

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

And in your code you could use it like this:

<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