user308553 user308553 - 10 months ago 80
AngularJS Question

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">
answers:<input type="text"/>
correct:<input type="radio" name="correctChoice" value ={{$index}}/>
<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 .. >
<li> [...] </li>

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
. 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?


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: