2016-07-25 9 views
0

私と同じような質問を探してみましたが、私たちの状況は同じではないことがわかりました。だから私はここにこれを掲示している。AngularJSを使用してラジオボタンを1つだけ選択する方法

質問の選択方法が質問に依存する質問のリストを作成しようとしています。質問#1にはラジオボタンがあり、質問#2にはチェックボックスなどがあります。 1つのセットではラジオボタンを使用して回答を選択できますが、チェックボックスのように動作します(チェックをはずしていない)。何か不足していますか?以下は

は私のHTMLです:

{ 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"} 
]}, 

をそして、これは私が現在取得していますものです::

以下

<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ですenter image description here

助けてください。

ありがとうございます。

+2

それに名前を付けて? –

+0

お返事ありがとうございます。 :)これはばかげている場合は申し訳ありません...しかし、私はすべてのラジオボタンに同じ名前を使用できますか?それとも彼らはユニークでなければならないのですか? –

+1

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

答えて

0

私の解決策を以下に示します。ガイダンスのためのサイモン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"} 
]}, 
関連する問題