

ons-listでRadiobutton Listを実現したく、以下のコードを実装しております。

これでコマンド `$ cordova emulate ios`
を実行しシミュレータを表示したところ、メニューの右側(先頭のみ)にチェックマークが表示されません。

「ng-repeat」で各値を取得できているのは確認できたのですが、HTMLに生成し表示する際にうまくいってないようです。

もし解決方法がご存知でしたら、ご教授のほどお願いいたします。

### 表示結果

[![チェックマーク表示しない](https://i.stack.imgur.com/pcpvw.png)](https://i.stack.imgur.com/pcpvw.png)

### 現状のコード

HTML

[code]

    <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>
    
[/code]

JSON

[code]

    var config = {
    timeout: [
        {name: '1分', minisec: 600, selected: 'checked'},
        {name: '5分', minisec: 3000, selected: ''},
        {name: '10分', minisec: 6000, selected: ''}
    ]}
    
[/code]


CC BY-SA 4.0
2016-01-16T08:27:43.047
20974
2022-12-23T02:14:43.913
2022-12-23T02:14:43.913
3060
9561
question
ios onsen-ui angularjs cordova
Onsen UI のラジオボタンで初期設定をしてもチェックマークが表示されない


`Onsen UI`のクラス`radio-
button`は、`input`タグの`checked`属性が存在するまたは実際にタップされた場合にチェックを表示する動きのようです。  
`input`タグの`{{timeOutList.selected}}`は、そのまま`{{timeOutList.selected}}`と出力されるため、チェックが表示されません。

ディレクティブを使用し、取得したエレメント（`input`タグ）の`checked`属性を有効にすることで、チェックを表示することができます。

JavaScript

[code]

    <script>
        var app = ons.bootstrap("myApp", ["onsen"]);
        // inputタグのchecked属性を有効にするディレクティブ
        app.directive("radioCheck", function() {
            return {
                restrict : "A",
                scope : {checkOn : "="},
                link : function(scope, elem, attr) {
                    if (scope.checkOn) {
                        elem[0].checked = true;
                    }
                }
            };
        });
        // コントローラ
        app.controller("connecttimeoutController", function($scope) {
            $scope.config = {
                timeout: [
                    {name: '1分', minisec: 600, selected: 'checked'},
                    {name: '5分', minisec: 3000, selected: ''},
                    {name: '10分', minisec: 6000, selected: ''}
                ]};
        });
    </script>
    
[/code]

HTML

[code]

    <ons-template id="connecttimeout.html">
        <ons-page ng-controller="connecttimeoutController">
            <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" check-on="timeOutList.selected=='checked'" radio-check>
                        <div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
                        {{timeOutList.name}}
                    </label>
                </ons-list-item>
            </ons-list>
            <br>
        </ons-page>
    </ons-template>
    
[/code]


CC BY-SA 3.0
2016-01-16T14:50:56.697
20982
2016-01-16T14:50:56.697
9566
20974
answer