AngularJS ng-model-options getter-setter

by

The documentation might seem a bit fuzzy but the usage is quite simple.
What you need to do:

  1. HTML: 

    <input ng-model="pageModel.myGetterSetterFunc"
ng-model-options=" {getterSetter: true }">

  2. in JS controller, instead of the actual model, create a function that will return the value (+ apply stripping) if the there is no parameter sent and that will update the model (+ apply other changes) if a parameter is sent.

The getter/setters is basically another “layer” between the view value and model value.

Example:

$scope.pageModel.firstName="";
$scope.pageModel.myGetterSetterFunc: function (value) {
  if (angular.isDefined(value)) {
    $scope.pageModel.firstName = value + '...';
  } else {        
    return $scope.pageModel.firstName.substr(0,
      $scope.pageModel.firstName.lastIndexOf('...')
    );
  }
}

DEMO PLUNKER:
http://plnkr.co/edit/Zyzg6hLMLlOBdjeW4TO0?p=preview

(check console – http://screencast.com/t/3SlMyGnscl)

NOTE: It would be interesting to see how would this scale in terms of reusability. I would advise to create these getter/setters as externalized reusable methods and have generators for them (because the data model is different for each case). And in controllers to only call those generators. Just my 2 cents.

More Related Contents:

  1. When to favor ng-if vs. ng-show/ng-hide?
  2. AngularJS – UI-router – How to configure dynamic views
  3. Calculating sum of repeated elements in AngularJS ng-repeat
  4. What’s the difference between $evalAsync and $timeout in AngularJS?
  5. What is the best way to conditionally apply attributes in AngularJS?
  6. AngularJS access scope from outside js function
  7. Unit Testing AngularJS directive with templateUrl
  8. Angular ng-repeat add bootstrap row every 3 or 4 cols
  9. Can an AngularJS controller inherit from another controller in the same module?
  10. getting the ng-object selected with ng-change
  11. Angular: calling controller function inside a directive link function using &
  12. Limit the length of a string with AngularJS
  13. AngularJS : Custom filters and ng-repeat
  14. inline conditionals in angular.js
  15. Angular, content type is not being sent with $http
  16. angular directive encapsulating a delay for ng-change
  17. Angular: ng-bind-html filters out ng-click?
  18. How can I test an AngularJS service from the console?
  19. Angularjs ui-router. How to redirect to login page
  20. localStorage vs sessionStorage vs cookies
  21. Send multipart/form-data files with angular using $http
  22. Getting MathJax to update after changes to AngularJS model
  23. AngularJS leaves comments in HTML: is it possible to remove them?
  24. ng-options with disabled rows
  25. Usage of $broadcast(), $emit() And $on() in AngularJS
  26. How/when to use ng-click to call a route?
  27. What’s the best way to cancel event propagation between nested ng-click calls?
  28. How to handle $resource service errors in AngularJS
  29. AngularJS: ngInclude vs directive
  30. How to create a AngularJS promise from a callback-based API

Leave a Comment