代码之家 › 专栏 › 技术社区 › Rorschach

SchemaForm将用户输入添加到架构数组

angular-schema-form angularjs

Rorschach · 技术社区 · 8 年前

背景

我正在用 angular-schema-form

安装程序

我正在尝试创建一个用户可以使用表单创建的项目数组。因此,用户可以根据需要向数组中添加任意多的项。

目前,数组中的项包含命令类型。

命令类型应该是包含ssh、rest以及用户作为个性化命令类型输入的任何内容的下拉列表。

迄今为止的代码

图式

{
  "type": "object",
  "properties": {
    "personalizedCommandType": {
      "title": "Personalized Command Type",
      "type": "string"
    },
    "commands": {
      "type": "array",
      "title": "Actions",
      "items": {
        "type": "object",
        "properties": {
          "commandType": {
            "title": "Command Type",
            "type": "string",
            "enum": [
              "REST",
              "SSH"
            ]
          }
        }
      }
   }
  }
}

形式

[
  {
    "type": "help",
    "helpvalue": "<h5>Command</h5>"
  },
  {
    "key":"personalizedCommandType"
  },
  {
    "title":"Command",
    "key": "commands",
    "items": [
      "commands[].commandType"
    ]
  }
]

可以在此处测试此代码: http://schemaform.io/examples/bootstrap-example.html . 只需复制并粘贴我的代码。

问题

如您所见,我现在拥有的代码有一个带有个性化命令类型的字段和一个带有两个选项ssh和rest的下拉列表数组。但是,我希望在用户输入个性化命令类型后,也包含它的值。

注释

copyValueTo 似乎没有我想要的功能,因为它只能更改模型 ,但我希望它更改图式 .

1 回复 | 直到 7 年前

georgeawg 8 年前

使用 onChange 选项:

[
  {
    "type": "help",
    "helpvalue": "<h5>Command</h5>"
  },
  {
    "key":"personalizedCommandType"
     onChange: "updateSchema(modelValue,form)"
  },
  {
    "title":"Command",
    "key": "commands",
    "items": [
      "commands[].commandType"
    ]
  }
]

更新架构:

var defaultEnum = ["REST","SSH"];

$scope.updateSchema = function(modelValue,form) {
    var currentEnum = $scope.schema.commands.items.properties.commandType.enum;
    angular.copy(defaultEnum, currentEnum);
    if (modelValue) {
        currentEnum.push(modelValue);
    }; 
    $scope.$broadcast('schemaFormRedraw');
};

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

4 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

4 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

4 年前

jieunbi · 按日期排序数组(最新优先)

4 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

4 年前

Stradosphere · 如何防止ng bind html添加结束标记?

8 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

8 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

8 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

8 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

8 年前