javascript - 如何使用 Angular + ionicframework 制作复选框？

Question

我正在尝试在弹出窗口上创建一个复选框。

我可以在单击按钮时弹出窗口，但当用户选择选项时不会显示复选框。我要显示this当用户选择一个选项时的图像。

用户可以使用尽可能多的复选框选择多个选项。为了显示该复选框，我覆盖了它的 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

你可以只使用 ionic ion-checkbox directive

这是编辑后的 ​​plunkr 和编辑后的弹出窗口模板 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