Question

我希望用户能够切换一个选项。如果他们切换到某个部分中的另一个选项，它会将其他先前选择的选项切换为关闭。用户还可以取消选择他们的选择（即）。以下步骤： -

点击按钮1（按钮1转动＆＃34;关闭＆＃34;转到＆＃34;打开＆＃34;）
再次点击按钮1（它应该转到＆＃34;开＆＃34;到＆＃34;关＆＃34;）

我使用了以下代码

    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);
    }
  }
})

在HTML中

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

我想知道如何通过再次点击按钮来打开/关闭单选按钮（不要点击同一组中的其他按钮）。

Answer 1

为什么不使用内置的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>

如何打开/关闭离子无线电切换？

1 个答案: