离子弹出窗口内的iPad单选按钮问题

时间:2015-08-16 14:00:15

标签: angularjs radio-button ionic-framework ionic

我在弹出窗口中使用单选按钮为我的应用程序创建下拉列表类型过滤器。

当我使用iPad时,单选按钮会变得混乱!这适用于其他所有设备。

最佳插图在此视频中

https://www.youtube.com/watch?v=Begkz4uS8hQ

这是我的代码:

<script id="templates/popover.html" type="text/ng-template">
    <ion-popover-view>
        <ion-content>
            <div class="item bar-header bar-positive">
                <h2 class="title">Difficulty</h2>
            </div>
            <label class="item item-radio">
                <input type="radio" ng-model="filter.difficulty" value="" name="group">
                <div class="item-content">
                    All
                </div>
                <i class="radio-icon ion-checkmark"></i>
            </label>
            <label class="item item-radio">
                <input type="radio" ng-model="filter.difficulty" value="Easy" name="group">
                <div class="item-content">
                    Easy
                </div>
                <i class="radio-icon ion-checkmark"></i>
            </label>
            <label class="item item-radio">
                <input type="radio" ng-model="filter.difficulty" value="Medium" name="group">
                <div class="item-content">
                    Medium
                </div>
                <i class="radio-icon ion-checkmark"></i>
            </label>
            <label class="item item-radio">
                <input type="radio" ng-model="filter.difficulty" value="Hard" name="group">
                <div class="item-content">
                    Hard
                </div>
                <i class="radio-icon ion-checkmark"></i>
            </label>
            <label class="item item-radio">
                <input type="radio" ng-model="filter.difficulty" value="Expert" name="group">
                <div class="item-content">
                    Expert
                </div>
                <i class="radio-icon ion-checkmark"></i>
            </label>
        </ion-content>
    </ion-popover-view>
</script>

使用此显示:

        <button class="button button-positive button-small col col-20 icon-left ion-connection-bars filter-button" ng-click="popover.show($event)">
            {{filter.difficulty || 'All'}}
        </button>

非常感谢能够提供帮助的任何人。

0 个答案:

没有答案