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

score 7 · Accepted Answer · answered Nov 05 '14 at 00:30

7

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>

answered Nov 05 '14 at 00:30

Austin Greco

32,997
6
55
59

1

+1 The only reason why I didn't suggest to do it like this is because it can be quite challenging to apply custom css styles to the letters. Also, it seemed that the OP had a very particular markup. However, this solution solves the question while offering a markup semantically better. – Josep Nov 05 '14 at 02:28

Josep · Answer 2 · 2014-11-05T00:45:52.687

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>

Bullet list with alphabet in ng-repeat

2 Answers2

Example