CODEWITHSUNDEEP
angularjs
user308553
user308553

Reputation: 1250

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

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?

Upvotes: 1

Views: 1245

Answers (1)

Alexander Kravets
Alexander Kravets

Reputation: 4395

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:

Upvotes: 5

Related Questions