Question

I am trying to make a checkbox on popover.

I am able to make popover on button click but the checkbox does not display when the user selects an option. I want to show this image when the user selects an option.

The user can select multiple option with as many checbboxes. To show the checkbox I overwrite it's css.

plunker

 .checkbox, .radio {
    width: 19px;
    height: 25px;
    padding: 0px; /* Removed padding to eliminate color bleeding around image
       you could make the image wider on the right to get the padding back */
    background: url("http://icons.iconarchive.com/icons/visualpharm/must-have/256/Check-icon.png") no-repeat;
    display: block;
    clear: left;
    float: left;
 }

Answer 1

您可以使用离子ion-checkbox directive

这是编辑过的plunkr和编辑的popover模板http://plnkr.co/edit/Pglgc4lAqfwVuPYmVGac?p=preview

<script id="my-popover.html" type="text/ng-template">
    <ion-popover-view>
        <ion-header-bar>
            <h1 class="title">My Popover Title</h1>
        </ion-header-bar>
        <ion-content>
            <ul class="list" ng-repeat="item in a track by item.name">
                <ion-checkbox ng-model="isChecked">{{item.name}}</ion-checkbox>
        </ion-content>
    </ion-popover-view>
</script>

如果您仍想使用自定义图标，请不要忘记切换元素类，例如使用ng-class directive

how to make checkbox using angular + ionicframework?

1 个答案: