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!! enter image description here

why do not change your model data type from string to number and date? may be using a wrapper property. — rnrneverdies
– rnrneverdies, Commented Sep 4, 2014 at 4:17
@rnrneverdies I have a very different data structure it has combination of number, string and date and I cannot change it as my whole functionality is developed now.. — user614946
– user614946, Commented Sep 4, 2014 at 4:42

rnrneverdies · Accepted Answer · 2015-12-08 15:29:07Z

6

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

edited Dec 8, 2015 at 15:29

answered Sep 4, 2014 at 6:14

rnrneverdies

15.7k9 gold badges67 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anton Over a year ago

Note that for optional input, you'll get null as value in your parser. You have to deal with that properly, otherwise it will result in "null" string...

Collectives™ on Stack Overflow

How to convert string to number or date in angularjs expression

1 Answer 1

More Information:

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

More Information:

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related