How to convert string to number or date in angularjs expression

Question

I use angularjs to create a pagination type, for example, I have a 2D array and I am showing values ​​from it. It works fine, but I also want to be able to edit the values, so I used ng-hide in the input tag and it works fine, but the problem is that if the input type is a number or date, and the value type of my array is a string then values ​​are not displayed in editable inputs.

the code:

<table class="table table-hover"> <thead> <tr class="active"> <th class="id">Label</th> <th class="name">Field</th> </tr> </thead> <tbody> <tr ng-repeat="item in fieldsonPage[currentPage]" class="active"> <td>{{item}}</td> <td> <div ng-repeat="prop in pagedItems[currentPage]" class="active"> <div ng-hide="ngEditName" ng-click="ngEditName=!ngEditName"> {{prop[item]}} </div> <div ng-show="ngEditName"> <input type="{{fieldsType[item]}}" ng-hide="{{fieldsType[item] == 'textarea' ? 'true' : 'false'}}" ng-model="prop[item]" class="form-control"/> <textarea rows="4" cols="50" ng-hide="{{fieldsType[item] == 'textarea' ? 'false' : 'true'}}" class="form-control" ng-model="prop[item]" /><div ng-click="ngEditName=!ngEditName">Close</div> </div> </div> </td> </tr> </tbody> </table> 

The type is determined by the type of related data that works, but the binding is not correct, so I need a way to convert the string to a number or date into an expression in the html page itself . Any key!

Answer 1

This method uses a directive to automatically convert numbers to strings and vice versa. I mean using the input type=number element bound to the string variable.

This is done using $ formatters and $ parsers.

 app.directive('numberConverter', function() { return { priority: 1, restrict: 'A', require: 'ngModel', link: function(scope, element, attr, ngModel) { function toModel(value) { return "" + value; // convert to string } function toView(value) { return parseInt(value); // convert to number } ngModel.$formatters.push(toView); ngModel.$parsers.push(toModel); } }; }); 

HTML

  <input type="number" number-converter ng-model="model.number"> 

Additional Information:

ngModel. $ formatters

An array of functions to execute as a pipeline when the model value changes. Each function is called, in turn, passing the value to the next. Used to format / convert values ​​for display in the control and validation.

ngModel. $ Parsers

An array of functions to execute as a pipeline, whenever the control reads a value from the DOM. Each function is called, in turn, passing the value to the next. The last return value is used to populate the model. Used for disinfection / conversion of values, as well as for verification. For validation, parsers must update the validity state with $ setValidity () and return undefined for invalid values.

Plunker

Source Documentation: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController