angularJS dynamic generated li tag with ng repeat creating multiple ul tag

Question

The following code contain a input box, a radio button and a button.

When the button is clicked, it will generate one more inputbox and radio button. All the radio button are under the same name.

  <ul id = "listOfAnswers" ng-repeat="i in addQuestion.loop(addQuestion.numOfChoice) track by $index">
    <li>
        answers:<input type="text"/>
        correct:<input type="radio" name="correctChoice" value ={{$index}}/>
    </li>
  </ul>
  <button ng-Click="addQuestion.numOfChoice = addQuestion.numOfChoice + 1">add more choices</button><br/><br/>

When I open it in browser, while it is displaying properly when I inspect it, it is showing

<ul ..>
  <li> [...] </li>
</ul>

<ul .. >
  <li> [...] </li>
</ul>

so every repeat it generate another ul tag. The problem is Im trying to get all the li item at the end and ajax it, by using getElementById("ul-tag-id").children. I can assign a class name to each li item, but I prefer the previous method, neater.

Am I doing something wrong here? Also I just learn that there are custom directive, I cant decide when I should put the stuff in controllers when I should put them in a directive. A lot of tutorial I find online are outdated, I'm not sure which to follow, any advice?

Use directives when you need a reusable component.

Casey
– Casey

2016-06-02 16:31:25 +00:00
Commented Jun 2, 2016 at 16:31 — Casey
– Casey, Commented Jun 2, 2016 at 16:31

Community · Accepted Answer · 2017-05-23 12:31:49Z

5

ng-repeat should be used on the element that you want to be repeated. Looks like you need to move it to the li element.

Some learning resources:

Stackoverflow - Specifically your question
Official AngularJS tutorial - AngularJS basics, up-to-date with the latest version.
ng-book - Controllers, scopes, directives, services... Everything is very well explained.

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Jun 2, 2016 at 15:23

Alexander Kravets

4,4351 gold badge19 silver badges15 bronze badges

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

1 Comment

user308553 Over a year ago

o that's embarrassing, thanks. Would you be able to answer my second question? or does it require a very lengthy answer?

Collectives™ on Stack Overflow

angularJS dynamic generated li tag with ng repeat creating multiple ul tag

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related