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

ng-model and CheckBox


  • belchski
    Participant

    Posts: 1
    Member Reply #2512

    I’m likely missing something here but any help is appreciated. I’m using the v4.1 Admin AngularJS Theme 1 and I have a regular form with a checkbox. I can’t seem to get the checkbox to be “checked=true” when the page loads after setting the scope variable.

    Sample:

    Controller:

    MetronicApp.controller('TestController', function ($rootScope, $scope, $stateParams, $http, $timeout, Notification, $location, MyService) {

    $scope.$on('$viewContentLoaded', function () {

    Metronic.initAjax();

    });

    $scope.myTestVar = true;

    }

    HTML:

    <label class="checkbox">

    <input type="checkbox" ng-model="myTestVar" />

    This should be checked but..it's not.

    </label>

    I have noticed that when setting the variable to true in the sample above the checkbox requires 2 clicks to get it responsive. The binding begins to work after the second click.

    If I make a web service call for an object then checkboxes work properly and as expected.

    Where/how do I set checkbox default values?

     

     

    Sean
    Sean
    Keymaster

    Posts: 4221
    Support Staff Reply #2521

    Hi :),

    Thanks for contacting our support.

    Please note those checkboxes are customized by uniformjs plugin and after checking actual input state you will need to call the plugin’s API to sync its UI:

    $.uniform.update(“#myUpdatedCheckbox”);

    If you need any further clarifications please let us know.

    Thanks.


    belchski
    Participant

    Posts: 1
    Member Reply #2526

    I knew I was missing something. Thank you for the tip. This led me to using some directive code I found out there and it works like a charm now. This directive is also helpful to apply uniform styling when dynamically creating controls via ng-repeat. If anyone is interested here it is:


    app.directive('applyUniform',function($timeout){
    return {
    restrict:'A',
    require: 'ngModel',
    link: function(scope, element, attr, ngModel) {
    element.uniform({useID: false});
    scope.$watch(function() {return ngModel.$modelValue}, function() {
    $timeout(jQuery.uniform.update, 0);
    } );
    }
    };
    });

    Usage:

    <input type="checkbox" apply-uniform ...etc>

    Found that here: http://stackoverflow.com/questions/18215366/angularjs-uniformjs-select-control-not-updating

    Sean
    Sean
    Keymaster

    Posts: 4221
    Support Staff Reply #2544

    Hi :),

    Good finding. We will check it further and consider implementing it in a future releases. Good luck with your project!

    Thanks.


    luca.cossini
    Participant

    Posts: 7
    Member Reply #7193

    Hi,

    I had the same problem, and I resolved using the directive you suggested above, but if I use it in an  ng-repeat block it duplicates checkboxes (see attachment “list.jpg”):

    A “single” checkbox with “apply-uniform” directive works without any problem (see attachment “single.jpg”).

    The two kind of checkboxes are made in the same way.. the only differences is that the checkbox list above is created using “ng-repeat”.

    Inspecting HTML code generate, I found out that it create a structure like this:

     

    <label class=”col-md-7 ng-scope” data-ng-repeat=”item in model.TipologieFornitori”>
    <div class=”checker” id=”uniform-CHK_Tipologia_POSA”>
    <span>
    <div class=”checker”>
    <span class=”checked”>
    <input name=”CHK_Tipologia_POSA” class=”icheck-list ng-valid ng-dirty ng-valid-parse ng-not-empty ng-touched” id=”CHK_Tipologia_POSA” type=”checkbox” ng-model=”model.modelContainer[‘tipo’+item.CODICE].checked” ng-click=”select(item, $event)” data-title=”Servizio posa e fornitura”>
    </span>
    </div>
    </span>
    </div>
    <span class=”ng-binding” ng-bind=”item.DESCRIZIONE”>Servizio posa e fornitura</span>
    </label>
    <div id=”uniform-CHK_Tipologia_POSA” class=”checker”></div>
    where it generates twice the structure  <div><span>  with and without class checked.

    How can I fix this strange behaviour?

    Thank you very much

     

    • This reply was modified 1 year, 7 months ago by  luca.cossini.
    Attachments:
    You must be logged in to view attached files.
    Sean
    Sean
    Keymaster

    Posts: 4221
    Support Staff Reply #7200

    Hi luca.cossini,

    In the HTML code you should not put the checkbox’s code copied from the code inspector. Instead just refer to the HTML template code not to the code inspector. The browser’s code inspector shows dynamically modified code that created by JS. However you can update the latest v4.6 that uses CSS based custom checkbox and radios instead of using custom uniformjs checkbox and radios. You can check the new custom 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.


    luca.cossini
    Participant

    Posts: 7
    Member Reply #7203

    I didn’t use HTML code copied from code inspector… I put here the code from the inspector to show you how it transform checkboxes inside ng-repeat block.

    As I wrote before, both the single checkbox (that works fine) and the multiple checkbox (that works bad) are generated by the same code:

    <label class=”col-md-7″ data-ng-repeat=”item in model.TipologieFornitori”>
    <input apply-uniform type=”checkbox” …><span>check</span>

    </label>

     

    with the difference that the single checkbox doesn’t have data-ng-repeat attribute.

     

     

    Does the new version resolve this problem??

    How do new checkboxes behave with AngularJS?

     

    Thank you

     

    PS: how can I check which version I’m using?

    • This reply was modified 1 year, 7 months ago by  luca.cossini.
    Sean
    Sean
    Keymaster

    Posts: 4221
    Support Staff Reply #7205

    Hi,

    We suggest you to use the new checkboxes since its based on pure CSS without any extra JS. It will work as normal checkboxes and should work with AngularJS properly.

    Thanks.


    luca.cossini
    Participant

    Posts: 7
    Member Reply #7206

    If we purchased the v4.5.5, do we have to pay again for v4.6?

    Sean
    Sean
    Keymaster

    Posts: 4221
    Support Staff Reply #7207

    No, you can just download the latest version for free. Each purchased license allows you to get lifetime update. But one license is used for one project/domain/client only. If you need any further clarifications please let us know.

You must be logged in to reply to this topic.