2016-07-25 118 views
0

我試着尋找類似於我的問題,只是爲了發現我們的情況是不一樣的。所以我在這裏發佈。如何選擇只有一個單選按鈕使用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"} 
]}, 

而這就是我目前得到:

enter image description here

請幫忙。

謝謝。

+2

給它一個名字? –

+0

感謝您的回答。 :)如果這聽起來很愚蠢,我很抱歉...但是我可以對所有單選按鈕使用相同的名稱嗎?或者他們必須是獨一無二的? –

+1

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

回答

0

在下面分享我的解決方案。謝謝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"} 
]}, 
相關問題