AngularJs - 动态表单 - 单选或复选框列表

Question

我想知道如何根据数据库中定义的内容创建一个动态组合框（单选）或复选框列表。

[{
  id:10
  question: "Gender?",
  type: 1, //singleSelect
  options: [{id:1, name:"Male"}, {id:2, name:"Female"}]
},
{
  id:11
  question: "Witch videogames do you have?",
  type: 2, //multiSelect
  options: [{id:1,name:"PS4"}, {id:2, name:"XBox One"}, {id:3, name:"Wii"}, {id:4, name:"Super Nintendo"}]
}]

我希望在控制器中收到一个选定的itens列表：

[10:[1],11:[2,3]] // male and with XBox One and Wii

有可能吗？

Answer 1

嗯，[10:[1],11:[2,3]]是无效的JavaScript，但如果您需要大约某些内容，则可以使用[{"10":1,"11":[2,3]}]。

您不需要AngularJS或任何第三方库（如jQuery）来构建动态表单。您可以通过DOM操作使用纯JavaScript来实现。

这是一个简单的演示，您可以在其中看到它的工作原理。

＆＃13;

＆＃13;

(function() {
  var data = [{
    "id": 10,
    "question": "Gender?",
    "type": 1,
    "options": [{
      "id": 1,
      "name": "Male"
    }, {
      "id": 2,
      "name": "Female"
    }]
  }, {
    "id": 11,
    "question": "Witchvideogamesdoyouhave?",
    "type": 2,
    "options": [{
      "id": 1,
      "name": "PS4"
    }, {
      "id": 2,
      "name": "XBoxOne"
    }, {
      "id": 3,
      "name": "Wii"
    }, {
      "id": 4,
      "name": "SuperNintendo"
    }]
  }];

  function buildFields(data) {
    var form, count, i, j, div, label, labelOpt, field, option, content, button;
    form = document.getElementById("form");
    count = data.length;
    for (i = 0; i < count; i++) {
      div = document.createElement("div"); // Creates a DIV.
      div.classList.add("question"); // Adds a css class to your new DIV.
      div.setAttribute("data-id", data[i].id); // Adds data-id attribute with question id in the new DIV.
      div.setAttribute("data-type", data[i].type); // Adds data-type attribute with question type in the new DIV.
      label = document.createElement("label"); // Adds a label to wrap the question content.
      label.innerText = data[i].id + "." + data[i].question; // Adds the question id in the label with the current question.
      if (data[i].type === 1) { // Check for the question type. In this case 1 is for the select tag.
        field = document.createElement("select"); // Creates a select tag.
        field.id = "field_" + data[i].id; // Adds an identifier to your select tag.
        field.name = "field_" + data[i].id; // Adds a name to the current select tag.
        if (data[i].options.length > 0) { // Checks for the options to create an option tag for every option with the current options values.
          option = document.createElement("option");
          option.value = "";
          option.text = ".:: Please select an option ::.";
          field.appendChild(option);
          for (j = 0; j < data[i].options.length; j++) {
            option = document.createElement("option");
            option.value = data[i].options[j].id;
            option.text = data[i].options[j].name;
            field.appendChild(option);
          }
        }
        div.appendChild(field);
      } else {
        if (data[i].options.length > 0) {
          content = document.createElement("span");
          for (var k = 0; k < data[i].options.length; k++) {
            labelOpt = document.createElement("label");
            labelOpt.innerText = data[i].options[k].name;

            field = document.createElement("input");
            field.type = "checkbox";
            field.value = data[i].options[k].id;

            labelOpt.insertBefore(field, labelOpt.firstChild); // Inserts a field before the label.
            content.appendChild(labelOpt);
          }
          div.appendChild(content);
        }
      }
      div.insertBefore(label, div.firstChild);
      form.appendChild(div);
    }
    button = document.createElement("button");
    button.type = "button";
    button.innerText = "Send";
    button.addEventListener("click", function() {
      var form, dataId, dataType, values, array, obj, i, result,
        form = document.getElementById("form");
      values = [];
      array = [];
      obj = {};
      for (i = 0; i < form.children.length; i++) { // Iterates for every node.
        if (form.children[i].tagName === "DIV") {
          dataId = parseInt(form.children[i].getAttribute("data-id"), 10);
          dataType = parseInt(form.children[i].getAttribute("data-type"), 10);
          if (dataType === 1) {
            obj[dataId] = parseInt(form.children[i].children[1].value, 10);
          } else {
            for (var j = 0; j < form.children[i].children[1].children.length; j++) {
              if (form.children[i].children[1].children[j].children[0].checked) {
                array.push(parseInt(form.children[i].children[1].children[j].children[0].value, 10));
              }
            }
            obj[dataId] = array;
          }
        }
      }
      values.push(obj);
      result = document.getElementById("result");
      result.innerText = JSON.stringify(values) + "\nTotal answers from question 11: " + values[0]["11"].length + ((values[0]["11"].length === 1) ? " answer." : " answers.");
    });
    form.appendChild(button);
  }
  buildFields(data);
})()

＆＃13;

.question {
  border: solid 1px #000;
  border-radius: 5px;
  padding: 5px;
  margin: 10px;
}
.question label {
  display: block;
}
#result {
  background-image: linear-gradient(#0CC, #fff);
  border-radius: 10px;
  padding: 10px;
}

＆＃13;

<form id="form" name="form">
</form>
<div id="result">
</div>

＆＃13;

＆＃13;

＆＃13;