CODEWITHSUNDEEP
javascriptangularjsinput-mask
Lance Shi
Lance Shi

Reputation: 1187

AngularJS: inputMask not working in angularJS table

I have two date fields within a ng-repeat table, the code looks like this: 

<tr ng-repeat="ol in orderLines">
    <td>
        <input class="audioStartTime" type="text" ng-model="ol.AudioStartTime"/>
    </td>
    <td>
        <input class="audioEndTime" type="text" ng-model="ol.AudioEndTime"/>
    </td>

Just like the name stated, audioStartTime and audioEndTime are time fields, so I need to apply input mask on them. I used the following code: 

$('.audioStartTime').each(function(index) {
     $(this).inputmask("hh:mm:ss", {placeholder: "HH:MM:SS", insertMode: false, showMaskOnHover: false});
});

I tested this code. After the part completely loads and I input them in the developer tool's console, it works pretty well. However, the problem is, when I put this code into document.ready, this doesn't seem to work.

It seems to me that angularJS might have a mechanism of reloading/rerendering the table content after calculating the ng-repeat data. Is that true? Is so, where can I put my input mask code so it can be done after the loading of angularJS elements?

Upvotes: 3

Views: 1673

Answers (1)

Lance Shi
Lance Shi

Reputation: 1187

I just got the answer myself. And this is the link helped me getting my answer: http://valve.github.io/blog/2013/08/01/jquery-inputmask-plugin-plus-angularjs/

So basically to use any jQuery plugin, I should be putting that into a directive than in the controller. So in the directive: 

    assignToFirmApp.directive('inputMaskTime', function() {
        return {
            require: "ngModel",
            link: function (scope, elem, attr, ctrl) {
                $(elem).inputmask("hh:mm:ss", {placeholder: "HH:MM:SS", insertMode: false, showMaskOnHover: false});
                elem.on('keyup', function () 
                {
                    scope.$apply(function()
                    {
                        ctrl.$setViewValue(elem.val());
                    });
                });
            }
        };
    });

And in the page: 

<input class="audioStartTime" input-mask-time="true" type="text" ng-model="ol.AudioStartTime"/>

Upvotes: 2

Related Questions