首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用ng模型绑定时保留自定义对象类型

使用ng模型绑定时保留自定义对象类型
EN

Stack Overflow用户
提问于 2015-08-07 17:54:47
回答 1查看 700关注 0票数 1

我有一系列自定义的javascript对象,它们扩展了基数组。这些对象由数据工厂接收和处理,供主窗体控制器使用。

当绑定到任何输入类型(复选框、无线电、选择)时,初始绑定在加载时是很好的,数据显示并正常工作。但是,在更新视图中的值时,自定义对象类型将被重写并替换为基数组。

当将数据发送回数据工厂时,我需要知道它是什么类型(有几种),以便确定如何为SharePoint列表格式化它。是否有任何方法来保留我的对象类型,并且仍然允许双向绑定?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-08-07 21:16:09

当输入通过ngModel更新模型时,它通常用一个覆盖模型初始值的值更新它,并且可能是另一种类型。

有时,您可以选择带有内置属性的返回值,例如ng-true-value和ng-false-value for复选框,或者ng-选项"label for value in array“。

如果您不能这样做,或者需要一个更可重用的解决方案,您可以使用ngModel格式化程序和解析器。

一些背景- ngModel实际上包含两个值:

  • $modelValue -- ngModel表达式中使用的scope属性持有的实际数据(例如,在ng-model="variable" - $modelValue中)将是来自变量的数据。
  • $viewValue --输入控件中使用的值--例如,用户看到的文本框中的文本。

通常$modelValue和$viewValue是相同的,但是我们可以选择使用$formatters和$parsers管道来更改它们。

$formatters是一个我们可以将函数推送到的管道。当$modelValue更改(即绑定的支柱更改)时,数据将由管道中的函数进行转换,结果将是$viewValue。

$parsers是相反的管道。例如,每当视图值发生变化时--有人将文本输入到输入中,则使用$viewValue管道将$parsers转换为模型值。

底线--您可以将自定义对象($modelValue)转换为输入控件($viewValue)中使用的数据,然后使用这两个管道返回。为此,创建一个简单的指令,并向管道(数组)添加任何您喜欢的转换器(函数)。例如(柱塞 -打开控制台并单击复选框):

定制原型:

代码语言:javascript
运行
复制
  function CustomObj(value) {
    this.value = !!value ? 'cats' : 'dogs';
  }

  CustomObj.prototype.getValue = function getValue() {
    return this.value;
  };

主计长:

代码语言:javascript
运行
复制
    .controller('ExampleController', ['$scope', function($scope) {

      $scope.checkboxModel = {
        value1: new CustomObj(true) // the model is an instance of CustomObj
      };
    }])

管道指令:

代码语言:javascript
运行
复制
    .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;
    });

而html:

代码语言:javascript
运行
复制
<input type="checkbox" ng-model="checkboxModel.value1" preserve-custom>
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/31883905

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档