javascript - Creating duration inputs (mm:ss:ms) in an AngularJS directive -

i have form need users input time duration, in resource saved minutes (or milliseconds, easy change). need directive take second/millisecond value create 3 separate inputs minutes, seconds & milliseconds.

users can modify each of components , directive update model seconds/millisecond value of 3 components.

i seem able take model value, create 3 inputs , using moment.js create separate components of time.

directive

angular.module('myexampleapp')   .directive('laptimeinput', function () {      var tpl = '<div class="lap_time_input"> \               <input ng-model="lap_time.minutes" type="number" class="minutes" placeholder="00" min="0" max="15" step="1"> \             <span class="lap-time-sep">:</span> \             <input ng-model="lap_time.seconds" type="number" class="seconds" placeholder="00" min="0" max="59" step="1"> \             <span class="lap-time-sep">.</span> \             <input ng-model="lap_time.milliseconds" type="number" class="milliseconds" placeholder="000" min="0" max="999" step="1"> \             </div>';      return {         restrict: 'a',         template: tpl,         replace: true,         require: 'ngmodel',         scope: {         },         link: function (scope, element, attrs, ngmodel) {              if (!ngmodel) return;              scope.$watch(function () {                 return ngmodel.$modelvalue;              }, function(newvalue) {                 // using moment.js extract min, sec & ms parts                 var duration = moment.duration(newvalue, 'seconds');                 scope.lap_time = {                     minutes: duration.minutes(),                     seconds: duration.seconds(),                     milliseconds: duration.milliseconds()                 }              });         }     };   }); 

controller

$scope.lap = lap.get({ id: 1 }); // $resource contains .lap_time property // or $scope.lap = {     lap_time: 90.999 } 

html

<input type="text" lap-time-input ng-model="lap.lap_time" /> 

this plunker bit clearer

http://plnkr.co/edit/xmntlitembsuffzzat9n?p=preview

now i'm not sure i've gone down right path using $watch on ngmodel, guess not. understand need directive 3 things:

• replace element 3 separate inputs minutes, seconds , milliseconds
• show model value user in created inputs using created inputs
• when user changes of 3 inputs, updates model value turning 3 separate values seconds/milliseconds

even nudge in right direction great help

this managed come with. not exact answer should on way.

template

updated template , passed in lap time attribute retrieved via directive scope (see directive section)

 <div lap-time-input="lap.lap_time"></div> 

controller

angular.module('myexampleapp')     .controller('myexamplectrl', function ($scope) {          // $resouce return via serice         $scope.lap = {             lap_time: 90.999         };          // watch value of lap time change here when update minute/second/millisecond         $scope.$watch('lap.lap_time', function (newlaptime) {             console.log('newlaptime', newlaptime);         }); }); 

directive

added second/milliseconds input field template. don't need it, put there visual/debug reason.

angular.module('myexampleapp')     .directive('laptimeinput', function () {     var tpl = '<div class="lap_time_input"> \               <input ng-model="laptimeinput" type="number" placeholder="00.00"> \               <input ng-model="lap_time.minutes" type="number" class="minutes" placeholder="00" min="0" max="15" step="1"> \             <span class="lap-time-sep">:</span> \             <input ng-model="lap_time.seconds" type="number" class="seconds" placeholder="00" min="0" max="59" step="1"> \             <span class="lap-time-sep">.</span> \             <input ng-model="lap_time.milliseconds" type="number" class="milliseconds" placeholder="000" min="0" max="999" step="1"> \             </div>';      return {         restrict: 'a',         template: tpl,         replace: true,         scope: {             laptimeinput: '='         },         link: function (scope) {              // watch changes in laptimeinput , update lap_time model/object             scope.$watch('laptimeinput', function (newvalue) {                 var duration = moment.duration(newvalue, 'seconds');                 scope.lap_time = {                     minutes: duration.minutes(),                     seconds: duration.seconds(),                     milliseconds: duration.milliseconds()                 }             });              // watch changes in lap_time model/object             scope.$watchcollection('lap_time', function (newtime, oldtime) {                 console.log(newtime);                 // convert lap time momentjs here                 scope.laptimeinput = moment.duration(newtime, 'seconds').asseconds();              });         }     }; }); 

jsfiddle