javascript - Preserving Custom Object Types When Binding Using ng-model -

i have series of custom javascript objects extend base array. these objects received , processed data factory use main form controller.

when bound input type (checkbox, radio, select) initial binding fine on load, data shows , works fine. however, minute update value in view, custom object type overridden , replaced base array.

when sending data data factory, need know type (there several) in order determine how format sharepoint list. there way preserve object type , still allow two-way binding?

when input updates model via ngmodel updates value overwrites model's initial value, , may of type.

sometimes can choose return value built in attributes, such ng-true-value , ng-false-value checkboxes or ng-options "label value in array".

if can't or need more reusable solution, can use ngmodel formatters , parsers.

some background - ngmodel contains 2 values:

• $modelvalue - actual data scope property used in ngmodel expression holds - example in ng-model="variable" - $modelvalue 1 coming variable.
• $viewvalue - value used in input control - example, text in text box user sees.

usually $modelvalue , $viewvalue same, have option change them using $formatters , $parsers pipelines.

$formatters pipeline can push functions. when $modelvalue change (ie binded prop changes), data transformed functions in pipeline, , result $viewvalue.

$parsers opposite pipeline. whenever view value changes, example - entered text input, $viewvalue converted using $parsers pipeline model value.

bottom line - can convert custom object ($modelvalue) data used in input control ($viewvalue), , using these 2 pipelines. so, create simple directive, , add whatever transformers (functions) pipelines (arrays). example (plunker - open console , click checkbox):

custom prototype:

  function customobj(value) {     this.value = !!value ? 'cats' : 'dogs';   }    customobj.prototype.getvalue = function getvalue() {     return this.value;   }; 

controller:

    .controller('examplecontroller', ['$scope', function($scope) {        $scope.checkboxmodel = {         value1: new customobj(true) // model instance of customobj       };     }]) 

pipelines directive:

    .directive('preservecustom', function() {       var ddo = {         restrict: 'a',         require: 'ngmodel',         link: function(scope, el, attrs, ngmodel) {            function formatter(modelvalue) {             if(modelvalue instanceof customobj) {               return modelvalue.getvalue() === 'cats';             }              return value;           }            function parser(viewvalue) {             return new customobj(viewvalue);           }            ngmodel.$formatters.push(formatter);           ngmodel.$parsers.push(parser);         }       }        return ddo;     }); 

and html:

<input type="checkbox" ng-model="checkboxmodel.value1" preserve-custom>