如何创建复选框的角度模式表单检查表

How to create angular schema form checklist of checkboxes?

本文关键字：模式 表单 检查表 复选框 何创建 创建      更新时间：2023-09-26

不太确定如何渲染此列表。我正在尝试创建一种从自定义对象创建的复选框形式。

这是我第一次使用angular-schema-form，但我在这里运气不好。

这是我的plunker。

var app = angular.module('plunker', ['ngSanitize', 'schemaForm']);
app.controller('MainCtrl', function($scope) {
  $scope.schema = {
    "type": "object",
    "title": "Comment",
    "properties": {
      "comment": {
        "type": "checkboxes"
      }
    },
    "required": [
      "comment"
    ]
  };
  $scope.form = [
    {
      key: "comment",
      type: "checklist",
      titleMap: [{value: "1", name: "First"}]
    }
  ];
  $scope.model = {
    "name": "Jon Snow"
  };
});

没有checkboxes字段类型。但是有两个选项可以定义几个复选框：

  1. boolean字段类型的用法
  2. 通过指定items数组使用array字段类型

我更新了你的代码：

$scope.schema = {
  "type": "object",
  "title": "Comment",
  "properties": {
    "comment": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "first": {
            "type": "boolean",
            "title": "First Checkbox"
          },
          "second": {
            "type": "boolean",
            "title": "Second Checkbox"
          },
          "third": {
            "type":"boolean",
            "title": "Third Checkbox"
          }
        }
      }
    },
    "comment2": {
      "type": "boolean",
      "title": "Standalone Checkbox"
    }
  }
};
$scope.form = [
  "*",
  {
    type: "submit",
    title: "Save"
  }
];
$scope.model = {};

要在默认情况下选中某些复选框，可以使用以下相应的属性名称：

$scope.model = {
  comment2: true,
  comment: [{
    second: true
  }]
};

有关更多详细信息，请查看plunker。

相关文章：