Question

我试图用一些动态的答案来填充一些问题，但它对我不起作用。

一切正常但我不明白如何通过以下问题获得此动态单选按钮值：

General Assessment of the Programme:Good
Quality of the Material Provided:Excellent
Design of the Programme:Excellent

如何获取此数据？

HTML

 <table class="table table-bordered" *ngFor="let item of  QuestionMaster.Questions let i=index">
    <tr>
        <td colspan="5">
            <h5><b>{{i+1}}. {{item.question1}}</b></h5> 
        </td>
    </tr>
    <tr>
        <td  align='center' valign="center" *ngFor="let items of  QuestionMaster.Ratings let i=index">
            {{items.description}}
        </td>                   
    </tr>
    <tr>
        <td  align='center' *ngFor="let items of  QuestionMaster.Ratings let i=index">
            <input type="radio" id="{{items.rateno}}" name="{{item.rowid}}" />
        </td>                   
    </tr>
</table>

JSON

{ 
    "Questions": [ 
        { "quid": 1, "question1": "General Assessment of the Programme ", "rowid": 1 }, 
        { "quid": 2, "question1": "Quality of the Material Provided ", "rowid": 2 }, 
        { "quid": 3, "question1": "Design of the Programme ", "location": "Pune", "username": "mdppune", "rowid": 3 }, 
        ...
    ], 
    "Ratings": [ 
        { "rateid": 1, "rateno": 1, "description": "Poor" }, 
        { "rateid": 2, "rateno": 2, "description": "Fair"}, 
        { "rateid": 3, "rateno": 3, "description": "Good"}, 
        { "rateid": 4, "rateno": 4, "description": "Very Good"}, 
        { "rateid": 5, "rateno": 5, "description": "Excellent"} 
    ]
}

Answer 1

您可以使用表单，并可以获得如下所有值：

<form #queForm="ngForm" novalidate (ngSubmit)="submitForm($event, queForm.value)" class="form-horizontal">
       <table class="table table-bordered" *ngFor="let item of  QuestionMaster.Questions let i=index">
       <tr>
          <td colspan="5">
             <h5><b>{{i+1}}. {{item.question1}}</b></h5>
          </td>
       </tr>
       <tr>
          <td  align='center' valign="center" *ngFor="let items of  QuestionMaster.Ratings let i=index">
             {{items.description}}
          </td>
       </tr>
       <tr>
          <td  align='center' *ngFor="let items of  QuestionMaster.Ratings let i=index">
             <input type="radio" name="{{item.rowid}}" [ngModel]="item.rowid" #rowid="ngModel" id="{{items.rateno}}" />
          </td>
       </tr>
       <tr>
          <td>
             <button type="submit" class="btn btn-primary btn-lg"> Submit </button>
          </td>
       </tr>
      </table>
</form>

在控制器方面

submitForm(event: any, model: any) {
    console.log(' model ' + JSON.stringify(model)); /*--- Display your model value here -----*/
}

Answer 2

模板驱动形式：

Girish回答的一些变化，因为它不起作用，至少对我而言。因此，如果您使用较新的Angular版本，则需要将每个表单输入的名称值与ngModel绑定，以获取绑定到表单的值。

也是你想要的输出：

General Assessment of the Programme:Good
Quality of the Material Provided:Excellent
Design of the Programme:Excellent

您需要更改以下代码段中的name="{{item.rowid}}"

<input type="radio" id="{{items.rateno}}" name="{{item.rowid}}" />

到

<input type="radio" [value]="items.description" name="{{item.question1}}" ngModel/>

如上所述，使用ngModel并设置[value]，因为如果不设置，则在选择单选按钮时将检查同一行中的所有单选按钮。

提交后，您现在也可以获得所需的输出，例如：

{
  "General Assessment of the Programme ":"Poor",
  "Quality of the Material Provided ":"Fair",
  "Design of the Programme ":"Good"
}

获取angular2中的动态单选按钮值

2 个答案: