使用ng-model绑定时保留自定义对象类型

Question

I have a series of custom javascript objects which extend the base Array. These objects are received and processed by the data factory for use by the main form controller.

When bound to a any input type (checkbox, radio, select) the initial binding is fine on load, the data shows and works fine. However, the minute i update the value in the view, the custom object type is overridden and replaced with a base Array.

When sending the data back to the data factory, i will need to know what type it is (there are several) in order to determine how to format it for the SharePoint list. Is there any way to preserve my object type and still allow for two-way binding?

Answer 1

When an input updates the model via ngModel it usually updates it with a value that overwrites the model's initial value, and may be of another type.

Sometimes you can choose the return value with built in attributes, such as ng-true-value and ng-false-value for checkboxes or ng-options "label for value in array".

If you can't do so or need a more reusable solution, you can use ngModel formatters and parsers.

Some background - ngModel actually contains two values:

• $modelValue - the actual data that the scope property used in the ngModel expression holds - for example in ng-model="variable" - $modelValue will be the one coming from variable.
• $viewValue - the value used in the input control - for example, the text in the text box that the user sees.

Usually $modelValue and $viewValue are the same, but we have the option to change them using $formatters and $parsers pipelines.

$formatters is a pipeline to which we can push functions. When $modelValue change (ie the binded prop changes), the data will be transformed by the functions in the pipeline, and the result will be $viewValue.

$parsers is the opposite pipeline. Whenever the view value changes, for example - someone entered text into an input, the $viewValue is converted using the $parsers pipeline into the model value.

Bottom line - you can convert your custom object ($modelValue) to the data used in the input control ($viewValue), and then back using these two pipelines. To do so, you create a simple directive, and add whatever transformers (functions) you like to the pipelines (arrays). For Example ( plunker - open the console and click the 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) // the model is an 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 the html:

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