美文网首页
ionic——ion-radio增加ion-option-but

ionic——ion-radio增加ion-option-but

作者: 一只飞 | 来源:发表于2017-08-07 18:23 被阅读0次

    首先,增加ion-option-button,要确保在ion-item标签下,

    而手册radio的两种形式都不行:

    <label class="item item-radio">
      <input type="radio" name="group" value="python">
      <div class="radio-content">
       <div class="item-content">
        Python
       </div>
       <i class="radio-icon ion-checkmark"></i>
      </div>
    </label>
    

    修改后会影响显示效果;
    <ion-radio ng-model="choice" ng-value="A">Choose A</ion-radio>
    无从下手;

    *解决办法:自己写radio!!!!

          <div>
            <h2>{{k}}</h2>
            <p>{{val}}</p>
          </div>
          <i class="icon ion-plus-circled" ng-if="radioShow[k]" style="color: #9e9e9e"></i>
          <ion-option-button class="button-assertive" ng-click="driverListDelete(k)">
            <i class="ion-trash-a icon"></i>
          </ion-option-button>
        </ion-item>
    

    ng-if控制被选择时图标的显示与否

    $scope.radioShow = {};
      $scope.radioClick = function (k) {
        $scope.radioShow = {};
        $scope.radioShow[k] = true;
        $scope.radio.radio = k;
      }
    

    $scope.radioShow为空对象,所以初始时,所有图标不显示;触发点击事件$scope.radioClick,把点击的赋值true,
    对应的图标显示,完成选中。
    方法中再次赋值‘{}’,是因为单选。

    *注意:没什么注意的;

    相关文章

      网友评论

          本文标题:ionic——ion-radio增加ion-option-but

          本文链接:https://www.haomeiwen.com/subject/brbalxtx.html