Search code examples
htmlloopsangularangular-ngmodelngfor

How to generate dynamically ngModel with *ngFor in Angular2?

This has been been baffling me since two days , how to have a new ngModel for every new iteration within an *ngFor loop ? the idea is that i load a list of questions, within every question I have 2 propositions , here is the html

 <div *ngFor="#qt of listQuestion">

<h3 class="uk-accordion-title" >{{qt.wordingQ}}</h3>

 <div class="uk-accordion-content">
    
<input type="checkbox"  id="0" [(ngModel)]="selected"  (Change)="cbChange($event)"/>

<label for="0" class="inline-label" > <b>{{qt.lpo[0]}}</b></label><br>
    
<input type="checkbox"  id="1" [(ngModel)]="selected_1" (Change)="cbChange_1($event)"/>

<label for="1" class="inline-label"><b>{{qt.lpo[1]}}</b></label><br>
    
    
                                   </div></div>

This will work smoothly only if u have one question in the listQuestion, if there is more than a question , once I will check a proposition (e.g : lpo[0]) of the first Question all the other first propositions (first because the index of lpo = 0) of other questions will be selected Here is an image illustrating the issue:

enter image description here

Any help please ?

Solution

  • Its pretty simple, you have to make sure that json contains appropriate true or false field as you are going to deal with checkbox.

    With ngFor i'd use ngModel like this way,

    [(ngModel)]="qt.lpo[0]"  //qt.lpo has to be true or false
// Answer1, Answer2  you can manage separately 

[(ngModel)]="qt.lpo[1]" //qt.lpo creates new instance for each iteration of ngFor loop.

    This way it creates different ngModel for each questions. But you have to make sure that qt.lpo field should contain true or false.