2

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: ''}
]}
1
  • もし解決されたようでしたら回答を承認してください。他に解決したコードがあるのでしたら回答を自信で投稿後、承認してください。
    – user10259
    Commented 2017年1月25日 6:33

1 件の回答 1

1

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

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

JavaScript

<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>

HTML

<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>
1
  • 上記ソースを参考にしながら改修してみました。 初期設定のメニューにチェックマークが表示されました。 ありがとうございます。 Commented 2016年1月17日 2:19

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。