javascript - AngularJS: input type=number" parse ngModel string value to number and back -

i pretty new angularjs. problem is:

my model data kept in database , if project reopened data displayed. save data stored again in database. have problem displaying number since value stored string , must parsed integer.

here html:

 <numeric-input numericbinding="item.showint" ng-model="item.operandvalue" ></numeric-input> 

depending on format of item value (bool, int, string), operandvalue displayed in different ways. directed value of numericbinding.

i tried use following directive parse string int:

.directive('numericinput', function () {     return {         restrict: 'e',         require: 'ngmodel',         scope: {             model: '=ngmodel',             numericbinding: '='         },         template: '<input id="integertype" type="number" ng-model="intvalue" ng-hide="!numericbinding" >',         link: function (scope) {             //avoid string , bool parsed,  showint false             if (scope.numericbinding === false || scope.numericbinding === undefined) {                 return;             }             scope.intvalue = parseint(scope.model, 10);          }     }; }) 

this way number displayed correctly. if want store data again bound item.operandvalue nullpointer in backend. understand need convert number string. tried multiple ways,e.g.

• ng-change: never got in given function.

then wanted use ngmodelcontroller formatter , parser described in angularjs - formatting ng-model before template rendered in custom directive

.directive('numericinput', function () {     return {         restrict: 'e',         require: 'ngmodel',         scope: {             model: '=ngmodel',             numericbinding: '='         },         template: '<input id="integertype" type="number" ng-model="item.operandvalue" ng-hide="!numericbinding" >',         link: function (scope, ngmodelcontroller) {             //avoid string , bool parsed,  showint false             if (scope.numericbinding === false || scope.numericbinding === undefined) {                 //console.log('not number - return');                 return;             }              ngmodelcontroller.$formatters.unshift(function(valuefrommodel) {                 return parseint(valuefrommodel, 10);            });              ngmodelcontroller.$parsers.push(function(valuefrominput) {                 return valuefrominput.tostring();             });          }     }; }) 

however, valuefrommodel undefined. number not displayed @ all. scope.item.operandvalue undefined. in chrome error is: typeerror: cannot read property 'operandvalue' of undefined.

i think should keep item.operandvalue, data bound, string , display int value different name. in first way seems item.operandvalue gets number , data binding not work longer.

how can fix problem? many help!

you use 2 fields: backing_field , binding_field. when db read write backing_field. used update binding_field, e.g. via $watch. can use 2 watches keep them in sync. in case 1 changes, convert value , write other. might argue create loop, angularjs detects nothing changes , not fire again. using this, can update backing_field, when binding_field changes due user interaction , update binding_field through backing_field when new data database.