如何选择只有一个单选按钮使用AngularJS

我试着寻找类似于我的问题，只是为了发现我们的情况是不一样的。所以我在这里发布。如何选择只有一个单选按钮使用AngularJS

我想创建一个问题列表，其中的选择方法取决于问题，所以问题＃1可以有单选按钮，问题＃2可以有复选框，等等。一组让用户使用单选按钮选择答案，但它们表现得像复选框（减去取消选中）。我错过了什么吗？

下面是我的HTML：

<ul style="padding-left:30px;"> 
    <li ng-repeat="query in carousel.currentQuestionObject.choices" style="padding-bottom:5px;" ng-init="carousel.checkboxCollection[query.id] = carousel.currentQuestionObject.init"> 
     <input type="{{carousel.currentQuestionObject.inputType}}" id="{{query.id}}" ng-model="carousel.checkboxCollection[query.id]"> 
     <label for="{{query.id}}" style="font-family:'MetricWeb-Regular';font-size:17px;cursor:pointer">&nbsp;&nbsp;{{query.question}}</label> 
    </li> 
</ul>

而下面是我的AngularJS与单选按钮的答案涉及：

{ inputType: "radio", init:false, question: "Tell us about your needs...", 
    choices: [ 
      { question: "Foo1", id: "qs1q1"}, 
      { question: "Foo2", id: "qs1q2"}, 
      { question: "Foo3", id: "qs1q3"}, 
      { question: "Foo4", id: "qs1q4"} 
]},

而这就是我目前得到：

请帮忙。

谢谢。

来源

2016-07-25 Dee J.

给它一个名字？ –

感谢您的回答。 :)如果这听起来很愚蠢，我很抱歉...但是我可以对所有单选按钮使用相同的名称吗？或者他们必须是独一无二的？ –

http://codepen.io/sp90/pen/GqdBEW –

在下面分享我的解决方案。谢谢Simon Pertersen的指导！添加名字真的有窍门。

HTML：

<ul style="padding-left:30px;"> 
    <li ng-repeat="query in carousel.currentQuestionObject.choices" style="padding-bottom:5px;" ng-init="carousel.checkboxCollection[query.id] = carousel.currentQuestionObject.init"> 
     <input name= "carousel.currentQuestionObject.name" type="{{carousel.currentQuestionObject.inputType}}" id="{{query.id}}" ng-model="carousel.checkboxCollection[query.id]"> 
     <label for="{{query.id}}" style="font-family:'MetricWeb-Regular';font-size:17px;cursor:pointer">&nbsp;&nbsp;{{query.question}}</label> 
    </li> 
</ul>

AngularJS：

{ inputType: "radio", name: 'qs1needs', init:false, question: "Tell us about your needs...", 
      choices: [ 
         { question: "Foo1", id: "qs1q1"}, 
         { question: "Foo2", id: "qs1q2"}, 
         { question: "Foo3", id: "qs1q3"}, 
         { question: "Foo4", id: "qs1q4"} 
]},

来源

2016-07-25 13:56:07

如何选择只有一个单选按钮使用AngularJS

回答

相关问题