Ion-checkbox in Ionic 2

@Mobius77 wrote:

In ionic1 I had the following code (minus most of the styling) to generate a scrollable list of things that are checkbox inputs:

<ion-scroll>
     <div class="row" style="flex-wrap:wrap">
         <div class="col" ng-repeat="thing in ::things"> <ion-checkbox>{{::thing}}</ion-checkbox> </div>
      </div>
</ion-scroll>

I believe a straight port of this ionic1 syntax into ionic2 syntax would be:

<ion-scroll scrollY="true">
      <ion-row style="flex-wrap:wrap">
         <ion-col *ngFor="#thing of things"><ion-checkbox>{{thing}}</ion-checkbox></ion-col>
      </ion-row>
 </ion-scroll>

However, {{thing}} is not being recognised/displayed, nor is any text 'label' I tested instead e.g.

<ion-checkbox>TEST</ion-checkbox>

doesn't display 'TEST'.

OK, so the doco suggests I may need to use an <ion-label> even though I am not nesting the <ion-checkbox> in an <ion-list> (for <ion-checkbox> docs say " It can be placed in an ion-item or used as a stand-alone checkbox" (bold emphasis mine). No examples in the docs how it can be used stand-alone...

So I tried the following:

<ion-scroll scrollY="true">
      <ion-row style="flex-wrap:wrap">
         <ion-col *ngFor="#thing of things"><ion-checkbox></ion-checkbox><ion-label>{{thing}}</ion-label></ion-col>
      </ion-row>
</ion-scroll>

{{thing}} is now showing however it is displayed underneath the checkbox rather than alongside it as was the case in ionic 1 syntax. i.e. <ion-label> is like a new div or span element in that it doesn't float right by default. The <ion-label> is also bringing with it lots of css which I have toggled off in Chrome Developer but haven't been able to get the display correct yet even after trying a float:left on the <ion-checkbox> and a float:right on the <ion-label>.

Any suggestions? Can I reproduce my ionic1 text labelled checkboxes without using <ion-label> in ionic2?

Posts: 5

Participants: 3

Read full topic