AngularJS ng-model-options getter-setter

Question

I've just upgrade to angular version 1.3.8.

When using 1.2.23 version I've created a directive to convert the data form view to model and vice verse.

This is my directive:

.directive('dateConverter', ['$filter', function ($filter) {

    return {

        require: 'ngModel',

        link: function (scope, element, attrs, ngModelController) {

            // Convert from view to model
            ngModelController.$parsers.push(function (value) {
                return $filter('date')(new Date(date), 'yyyy-MM-ddTHH:mm:ss')
            });

            // Convert from model to view
            ngModelController.$formatters.push(function (datetime) {
                return $filter('date')(datetime, 'MM/dd/yyyy');
            });
        }
    };
}]);

});

I see here that getters and setters in binding are now supported, but I cannot find anywhere how to use both getters and setters. Is there any way to do it? That is - can ng-model-options replace my convert directive?

Thanks

Answer 1

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.

Answer 2

This question is rather old - but for IE9+ (and of course all other relevant browsers) you can use the ECMAScript 5 getter/setter methode which I would prefer against the getterSetter option of ng-model:

var person = {
    firstName: 'Jimmy',
    lastName: 'Smith',
    get fullName() {
        return this.firstName + ' ' + this.lastName;
    },
    set fullName (name) {
        var words = name.toString().split(' ');
        this.firstName = words[0] || '';
        this.lastName = words[1] || '';
    }
}

person.fullName = 'Jack Franklin';
console.log(person.firstName); // Jack
console.log(person.lastName) // Franklin

This example is from http://javascriptplayground.com/blog/2013/12/es5-getters-setters/