Information About Initializing the Radio Button in the Onsen UI

We are implementing the following code in order to achieve Radiobutton List with ons-list.

HTML

<ons-template id="connecttimeout.html">
    <ons-page>
        <ons-toolbar>
            <div class="left"><ons-back-button>Back</ons-back-button></div>
            <div class="center">Connection timeout</div>
        </ons-toolbar>

        <ons-list modulator="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 minute', minisec:600, selected:'checked',},
        {name:'5 minutes', minisec:3000, selected:'},
        {name:'10 minutes', minisec:6000, selected:'}
    ]}

Now run the command "$cordova emulateios" and run the simulator
When displayed, no check mark appears on the right side of the menu (starting only).

I was able to confirm that I was able to get each value with ng-repeat, but
It doesn't seem to work when generating and displaying it in HTML.

If you know how to solve this problem, please let me know.

ios onsen-ui angularjs cordova

2022-09-30 16:32

1 Answers

Class radio-button of the Onsen UI appears to be a check when the checked attribute of the input tag exists or is actually tapped.
The input tag {{timeOutList.selected}} prints {{timeOutList.selected}}, so no check is displayed.

You can use the directive to display the check by enabling the checked attribute of the element you retrieved (the input tag).

JavaScript

<script>
    var app=ons.bootstrap("myApp", ["onsen"));
    // Directives for enabling the checked attribute of the input tag
    app.directive("radioCheck", function(){
        US>return{
            restrict : "A",
            scope: {checkOn:"=",
            link: function(scope, elem, attr) {
                if(scope.checkOn){
                    elem[0].checked=true;
                }
            }
        };
    });
    // Controllers
    app.controller("connecttimeoutController", function($scope){
        $scope.config = {
            timeout: [
                {name:'1 minute', minisec:600, selected:'checked',},
                {name:'5 minutes', minisec:3000, selected:'},
                {name:'10 minutes', minisec:6000, selected:'}
            ]};
    });
</script>

HTML

<ons-template id="connecttimeout.html">
    <ons-pageing-controller="connecttimeoutController">
        <ons-toolbar>
            <div class="left"><ons-back-button>Back</ons-back-button></div>
            <div class="center">Connection timeout</div>
        </ons-toolbar>

        <ons-list modulator="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>

2022-09-30 16:32

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656