ons-listでRadiobutton Listを実現したく、以下のコードを実装しております。
これでコマンド $ cordova emulate ios
を実行しシミュレータを表示したところ、メニューの右側(先頭のみ)にチェックマークが表示されません。
「ng-repeat」で各値を取得できているのは確認できたのですが、HTMLに生成し表示する際にうまくいってないようです。
もし解決方法がご存知でしたら、ご教授のほどお願いいたします。
表示結果
現状のコード
HTML
<ons-template id="connecttimeout.html">
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button>戻る</ons-back-button></div>
<div class="center">接続タイムアウト</div>
</ons-toolbar>
<ons-list modifier="inset" class="settings-list">
<ons-list-item ng-repeat="timeOutList in config.timeout" modifier="tappable">
<label class="radio-button radio-button--list-item">
<input type="radio" name="timeout" ng-value="{{timeOutList.minisec}}" {{timeOutList.selected}}>
<div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
{{timeOutList.name}}
</label>
</ons-list-item>
</ons-list>
<br>
</ons-page>
</ons-template>
JSON
var config = {
timeout: [
{name: '1分', minisec: 600, selected: 'checked'},
{name: '5分', minisec: 3000, selected: ''},
{name: '10分', minisec: 6000, selected: ''}
]}