2015-11-10 3 views
3

У меня есть два поля даты в пределах нг повтора таблицы, код выглядит следующим образом:AngularJS: inputMask не работает в angularJS таблицы

<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> 

Так же, как имя указанного, audioStartTime и audioEndTime является полями время, так Мне нужно применить маску ввода для них. Я использовал следующий код:

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

Я проверил этот код. После того, как деталь полностью загружается, и я ввожу их в консоль инструмента разработчика, она работает очень хорошо. Однако проблема заключается в том, что когда я помещаю этот код в document.ready, это не работает.

Мне кажется, что angularJS может иметь механизм перезагрузки/реверсирования содержимого таблицы после вычисления данных ng-repeat. Это правда? Так, где я могу поместить свой код маски ввода, чтобы это можно было сделать после загрузки элементов angularJS?

ответ

2

Я только что получил ответ сам. И это ссылка помогла мне получить мой ответ: http://valve.github.io/blog/2013/08/01/jquery-inputmask-plugin-plus-angularjs/

Так что в основном для использования любого плагина jQuery, я должен помещать это в директиву, чем в контроллер. Таким образом, в директиве:

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()); 
        }); 
       }); 
      } 
     }; 
    }); 

А на странице:

<input class="audioStartTime" input-mask-time="true" type="text" ng-model="ol.AudioStartTime"/> 
Смежные вопросы