Arturo Arturo - 15 days ago 7
AngularJS Question

Create multiple buttons with Angular in a loop

I have a variable "options" that contains a list

['a', 'b', 'c']
, and like this is displayed on the
<h3>
below.

Now I want to create a button for each element in the list, with the index appended to the
id
and as the
value
, and displaying the text in the button.

This is my code, but however I only get an empty button. What's wrong?

<h3>{{options}}</h3>
<form id="choice" name='form' method="POST" action="/" ng-repeat="i, option in options">
<button id="button{{i}}" type="submit" value="{{i}}">{{option}}</button>
</form>


EDIT: I made my code easier and it still doesn't show any of the 3 options in the
<span>
but it shows properly the list in the
<h3>
. Is it perhaps something that I need to install in order to run
ng-repeat
? I have the
angular.min.js
in the
<head>


<h3>{{options}}</h3>
<form id="choice" name='form' method="POST" action="/" ng-repeat="option in options">
<span>{{option}}</span>
</form>


I have this in the header:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

Answer

It seems it's just the missing brackets. Should be ng-repeat="(i, option) in options" in your case.

https://docs.angularjs.org/api/ng/directive/ngRepeat

Comments