Bullet list with alphabet in ng-repeat
I have an ng-repeat block as shown below, I am not using placeholder [[THE ALPHABET]]
in the code to render a, b, c, d
as slugs for a list in the appropriate order. I will always have 4 values. 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 look something like this.
a. option 1 b. option 2 c. option 3 d. option 4
+3
source to share
2 answers
HTML can do it itself:
<ol type="a">
Check out the section type
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>
+5
source to share
You can create your own filter, for example:
.filter('numberToAlphabet', function(){
return function(number){
return String.fromCharCode(number+97);
}
})
And in your code, you can 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
+4
source to share