How to convert string to number or date in angularjs expression

Question

I am using angularjs to make a pagination type of thing, say I have a 2D array and I am displaying the values from it. Its working fine but I also want to be able to edit thoes values so I used ng-hide in input tag and its working fine but the problem is that if the type of input is number or date and the type of my array values is string then the values are not displayed in the editable input boxes.

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 decided on the kind of data associated which is working but the binding is not proper so i need a way to convert string to number or date in the expression in html page itself. Any clue!!

Answer 1

This way uses a directive to automagically converts numbers to string and viceversa. I mean using an input element type=number binded to a string variable.

This is done by 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">

More Information:

ngModel.$formatters

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

ngModel.$parsers

Array of functions to execute, as a pipeline, whenever the control reads value from the DOM. Each function is called, in turn, passing the value through to the next. The last return value is used to populate the model. Used to sanitize / convert the value as well as validation. For validation, the parsers should update the validity state using $setValidity(), and return undefined for invalid values.

PLUNKER

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