This topic contains 3 replies, has 3 voices, and was last updated by Sean Sean 1 year, 8 months ago.

AngularJS and defaults for Checkboxes and Radio Buttons


  • razrYr
    Participant

    Member Reply #1080

    When using AngularJS, I cannot default a checkbox or radio button using ng-model.  Regardless of whether my model value is true or false, the checkbox or radio button will not display as checked.   Metronic.init() calls either handleUniform() or handleiCheck() and one on those is the source of the problem.  If I comment either method, then the correct box or button is checked.  I see on the web there is another person with this issue.   The URL for that description of this problem is here:  http://checkbox12.blogspot.com/2015/04/setting-checkbox-checked-on-page-load.html.  Is there any solution to this issue?

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #1096

    Hi,

    Please note you are using jquery plugin and its not by default integrated with angular js models. In your case you have 2 options: 1) to use it in jquery way. 2) integrate the unformjs plugin with AngularJS following below tutorials:

    http://stackoverflow.com/questions/16935095/correct-way-to-integrate-jquery-plugins-in-angular-js

    https://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/ 

    Thanks.


    Eli
    Participant

    Posts: 4
    Member Reply #8663

    In previous versions there was in your app.js a function handleUniform in which I added a code that allow me to have another external control not affected by Metronic (that control name started by ‘mycontrol_’ as you can see in the code below. But I just found out that in the new version that function is not there anymore.

     

    This was the way I changed your handleuniform:

    // Handles custom checkboxes & radios using jQuery Uniform plugin

    var handleUniform = function () {

    if (!$().uniform) {

    return;

    }

    var test = $(“input[type=checkbox]:not(.toggle, .md-check, .md-radiobtn, .make-switch, .icheck), input[type=radio]:not(.toggle, .md-check, .md-radiobtn, .star, .make-switch, .icheck)”).not(‘[name^=”mycontrol_“]’);

     

    if (test.size() > 0) {

    test.each(function() {

    if ($(this).parents(“.checker”).size() === 0) {

    $(this).show();

    $(this).uniform();

    }

    });

    }

    };

     

     

    //main function to initiate the theme

    init: function () {

     

     

    and that handleuniform function was called here :

    //Core handlers

    handleInit(); // initialize core variables

    handleOnResize(); // set and handle responsive

     

    //UI Component handlers

    handleMaterialDesign(); // handle material design

    handleUniform(); // hanfle custom radio & checkboxes

     

    How can I get now the same effect?

     

    Thnaks!

     

     

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #8671

    Hi,

    In recent versions we removed Uniform plugin and now Metronic uses pure css based custom checkbox and radio buttons. So you can remove handleUniform function from your code and refer to the new custom radios and checkboxes. For more info please check the markup of the new checkbox and radios here: http://keenthemes.com/preview/metronic/theme/admin_1/form_controls.html

    If you need any further clarifications please let us know.

    Thanks

     

You must be logged in to reply to this topic.