Search code examples
javascriptangularjsangularjs-ng-repeatalphabet

Bullet list with alphabet in ng-repeat


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

Solution

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