AngularJS – FuelUX checkbox bootstrap conflict

octubre 18, 2016

EDIT: wordpress removed html sample code and I don’t know how to fix it, in the meantime here’s a link to the source of the article.

I was trying to use a simple checkbox on a form, so I just copied the sample from bootstrap. But I forgot that I was using FuelUX on that form, so it never showed the checkbox. Apparently, there’s a problem mixing checkbox controls -at least in this case-.

So, my form was like this

<form name="editForm" role="form" novalidate>
    <div class="fuelux">
        ...
            <div class="modal-body">
            <div class="wizard" id="myWizard">
            ...

I’m using a wizard control inside a modal dialog. Well, it didn’t show up but the label. So instead, of using the bootstrap checkbox sample code I opted for using the FuelUX checkbox.

<div class="checkbox" id="myCheckbox">


    <span class="checkbox-label">Custom checkbox unchecked on page load</span>

</div>

now the checkbox was displaying just fine. It’s time to bind that the model, so I just added an ng-model attribute like so

<div class="checkbox" id="myCheckbox">


    <span class="checkbox-label">Custom checkbox unchecked on page load</span>

</div>

and it worked great, but only one way. I mean, when you tick the checkbox it updates the model, but if you update the model -anyhow- it won’t change it’s displayed value (won’t check or uncheck). So, you have to update the checkbox state by adding a ng-class attribute, which will add or remove a ‘checked’ class according to the model.

Finally, we have this working like a charm

<div class="checkbox" id="myCheckbox">


    <span class="checkbox-label">Privada</span>

</div>

Sources:
https://docs.angularjs.org/api/ng/directive/ngChecked
https://docs.angularjs.org/api/ng/directive/ngClass

Anuncios

2 comentarios to “AngularJS – FuelUX checkbox bootstrap conflict”


  1. […] AngularJS – FuelUX checkbox bootstrap conflict […]

  2. fdsfdsf Says:

    Vamos a ver que pasa.


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: