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

2017-08-07  本文已影响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,
对应的图标显示,完成选中。
方法中再次赋值‘{}’,是因为单选。

*注意:没什么注意的;

上一篇 下一篇

猜你喜欢

热点阅读