Create multiple buttons with Angular in a loop

Question

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>

I just did and still fails. I edited my question with an easier example that still fails. — user411103
– user411103, Commented Nov 18, 2016 at 17:42

leitasat · Accepted Answer · 2016-11-21 09:28:26Z

0

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

UPD Also ng-repeat should be an attribute of <button> in the first example and of <span> in the second one. Unless you want 3 forms on the page.

edited Nov 21, 2016 at 9:28

answered Nov 18, 2016 at 17:11

leitasat

9163 gold badges12 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user411103 Over a year ago

Seems that it still fails. I edited my question with some further info

leitasat Over a year ago

Oh I see. You need to move ng-repeat to <span> tag. Angular makes multiple instances of a tag ng-repeat is attribute of. @Arturo

Ali Baig · Accepted Answer · 2016-11-18 17:13:07Z

0

Just make sure you have the correct list in the options array and then try using it like

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

answered Nov 18, 2016 at 17:13

Ali Baig

3,8674 gold badges36 silver badges49 bronze badges

Collectives™ on Stack Overflow

Create multiple buttons with Angular in a loop

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related