Angularjs – How to make the ionic radio toggle on/off

angularjs, ionic-framework

I want the user to be able to toggle one option. If they toggle to another option within a section, it will toggle the other previously made selection to off. A user will also be able to deselect their selection (i.e).

  1. Tap button 1(button 1 turns "off" to "on")
  2. Tap button 1 again(it should turn "On" to "Off")

I used the following code

    app.directive('kmItoggleRadio', function() {  return{    restrict:'E',    compile: function(element,attrs)     {      var leftTitle='';            if(angular.isUndefined(attrs.kmLeftTitle)) {               leftTitle='';            }            else {                leftTitle=attrs.kmLeftTitle;            }      var rightTitle='';            if(angular.isUndefined(attrs.kmRightTitle)) {               rightTitle='';            }            else {                rightTitle="  "+attrs.kmRightTitle ;            }      var show='false';            if(angular.isUndefined(attrs.kmShow)) {              show="true";            }            else {              show=attrs.kmShow;            }      var htmlText='<div><div ng-switch on="format">'+            '<div ng-switch-when="kmForm">'+            '<div ng-show='+show+'>'+            '<ul class="list">'+            '<li class="item item-toggle">'+            ''+leftTitle+''+            '<label class="toggle toggle-positive">'+            '<input type="radio" value="'+attrs.kmValue+'" ng-model="'+attrs.kmModel+'" >'+            '<div class="track">'+            '<div class="handle"></div>'+            '</div>'+            '</label>'+            '</ul>'+            '</div>'+            '</div>'+            '<div ng-switch-when="kmPreview">'+            '<div ng-show='+show+'>'+            '<ul class="list">'+            '<li class="item item-toggle">'+            ''+leftTitle+''+            '<label class="toggle toggle-positive">'+            '<input type="checkbox" disabled="true" value="'+attrs.kmValue+'" ng-model="'+attrs.kmModel+'">'+            '<div class="track">'+            '<div class="handle"></div>'+            '</div>'+            '</label>'+            '</ul>'+            '</div>'+            '</div>'+            '</div></div>';            element.replaceWith(htmlText);    }  }})


<km-itoggle-radio  km-model="a.c" km-value="d" km-left-title="Dhoni"></km-itoggle-radio><km-itoggle-radio  km-model="a.c" km-value="s" km-left-title="Kohli"></km-itoggle-radio>

I want to know how to make the radio button toggle on/off by tapping the button again (with out tapping the other button in same group).

Best Solution

Why not use the built in ion-toggle?

Ionic toggle Codepen Demo

     <ion-toggle ng-repeat="item in settingsList"                ng-model="item.checked"                 ng-checked="item.checked">             {{ item.text }}    </ion-toggle>