Using angularjs filter in input element

by

In short: if you want your data to have a different representation in the view and in the model, you will need a directive, which you can think of as a two-way filter.

Your directive would look something like

angular.module('myApp').directive('myDirective', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelController) {
      ngModelController.$parsers.push(function(data) {
        //convert data from view format to model format
        return data; //converted
      });

      ngModelController.$formatters.push(function(data) {
        //convert data from model format to view format
        return data; //converted
      });
    }
  }
});

HTML:

<input my-directive type="text" data-ng-model="entity.date" />

Here is a working jsFiddle example.

More Related Contents:

  1. When to favor ng-if vs. ng-show/ng-hide?
  2. How can I dynamically add a directive in AngularJS?
  3. How to use the ‘replace’ feature for custom AngularJS directives?
  4. What is the best way to conditionally apply attributes in AngularJS?
  5. When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?
  6. Unit Testing AngularJS directive with templateUrl
  7. Refused to display in a frame because it set ‘X-Frame-Options’ to ‘SAMEORIGIN’
  8. How to select an element by classname using jqLite?
  9. AngularJS ng-style with a conditional expression
  10. Confused about Angularjs transcluded and isolate scopes & bindings
  11. Rendering directives within $sce.trustAsHtml
  12. How to allow only a number (digits and decimal point) to be typed in an input?
  13. How to autocapitalize the first character in an input field in AngularJS?
  14. Angular directive how to add an attribute to the element?
  15. get original element from ng-click
  16. How can I test events in angular?
  17. angularjs share data config between controllers
  18. AngularJS Group By Directive without External Dependencies
  19. AngularJS watch DOM change
  20. How do I apply an AngularJS directive based on a class set by ng-class?
  21. $apply vs $digest in directive testing
  22. How to use “ng-repeat” within template of a directive in Angular JS?
  23. When to use the AngularJS `$onInit` Life-Cycle Hook
  24. AngularJS – how to override directive ngClick
  25. Angular directive name: only lower case letters allowed?
  26. Angular directive for a fallback image
  27. What is ng-transclude?
  28. Understanding the transclude option of directive definition?
  29. angularjs text area character counter
  30. When to use double braces {{}} in angularJS

Leave a Comment