angularjs - 嵌套属性键不适用于自定义模板

Question

嵌套属性键在默认类型下工作正常。但它不适用于以下自定义模板。为什么 ？

这是我的领域：

 vm.fields = [
      {
        type: 'editableInput',
        key: 'profile.name.firstname',
        templateOptions: {
          label: 'First Name'
        }
      },
     {
        type: 'editableInput',
        key: 'profile.name.lastname',
        templateOptions: {
          label: 'Last Name'
        }
      }
    ];

我的期望：

{
  "profile": {
    "name": {
      "firstname": "rajagopal",
      "lastname": "subramanian"
    }
 }

但这就是我得到的：

 {
    "profile.name.firstname": "rajagopal",
     "profile.name.lastname": "subramanian"
 }

我的正式配置：

 formlyConfig.setType({
      extends: 'input',
      template: '<div><span editable-text="model[options.key]" e-name="{{::id}}"}}">{{ model[options.key] || "empty" }}</span></div>',
      name: 'editableInput'
    });

这是JSBIN

提前致谢。

Answer 1

问题在于嵌套键如何以角度形式工作。基本上它只适用于具有ng-model. 您的解决方法是使用model属性，而不是嵌套键（像这样）：

{
  type: 'editableInput',
  model: 'model.profile.name',
  key: 'firstname',
  templateOptions: {
    label: 'First Name',
    placeholder: 'Enter your First Name'
  }
},
{
  type: 'editableInput',
  model: 'model.profile.name',
  key: 'lastname',
  templateOptions: {
    label: 'Last Name',
    placeholder: 'Enter your First Name'
  }
}

祝你好运！

Answer 2

profile.name.firstname - > profile[name][firstname]

这是我的想象。我从未使用过 Angular