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實現。

這是一個簡單的演示，你可以看到它是如何工作的。

(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); 
 
})()

.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; 
 
}

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