從JSON創建動態表單

Question

我正在使用3個嵌套的ng-repeat，用於顯示幾個問題及其相應的答案。 直到這里很好，但我必須創建一個表單來保存答案，這是什么適當的方式呢？ 我正在測試這個：

<form>
    <div class="panel panel-default" ng-repeat="section in questionsTest">
        <div class="panel-heading">
            <h1>{{ section.name }}</h1>
            <h3 class="panel-title">{{ section.name }}. {{
                section.description }}</h3>
        </div>
        <div class="panel-body" ng-repeat="question in section.questions">
            {{ question.statement }}
            <div ng-repeat="answer in question.answers">
                <label class="radio-inline"> <input type="{{ answer.type }}" ng-model="test.idRadioButton"
                    name="{{ question.id }}" id="{{ answer.id }}" value="{{ answer.id }}">
                    {{ answer.valor }}
                </label>
            </div>
        </div>
    </div>
</form>

這是json：

{
    "section": [{
        "name": "Sección 1",
        "questions": [{
            "statement": "Primera pregunta",
            "answers": [{
                "valor": "1",
                "id": 3,
                "type": "radio"
            }, {
                "valor": "2",
                "id": 4,
                "type": "radio"
            }, {
                "valor": "3",
                "id": 7,
                "type": "radio"
            }, {
                "valor": "4",
                "id": 8,
                "type": "radio"
            }, {
                "valor": "5",
                "id": 9,
                "type": "radio"
            }, {
                "valor": "6",
                "id": 10,
                "type": "radio"
            }, {
                "valor": "7",
                "id": 11,
                "type": "radio"
            }],
            "id": 1
        }, {
            "statement": "Pregunta 3",
            "answers": [{
                "valor": "Si",
                "id": 1,
                "type": "radio"
            }, {
                "valor": "No",
                "id": 2,
                "type": "radio"
            }],
            "id": 3
        }, {
            "statement": "Pregunta 4",
            "answers": [{
                "valor": "Si",
                "id": 1,
                "type": "radio"
            }, {
                "valor": "No",
                "id": 2,
                "type": "radio"
            }],
            "id": 4
        }],
        "description": "description",
        "id": 1
    }

它根本不起作用，當我點擊第一個問題時，所有其他問題也被點擊了。 我是棱角分明的新手，我不知道如何面對這個。 謝謝

'現在'，但我無法存儲所有點擊的單選按鈕。 這就是我的控制器：

$scope.question = {};
    $scope.testing = function(){
        console.log($scope.question);
    };

測試功能僅用於顯示控制台上$ scope.question中存儲的值。

Answer 1

您必須為每個問題使用不同的模型。

采用：

ng-model="question.value"

我在這里做了一個工作的例子： https ： //plnkr.co/edit/SMYqvUNqXNJkW9x9ZmsB？p = preview

但是，您可能會對radio按鈕的用途感到困惑。 單選按鈕僅允許一次選擇一個。 如果您需要多個，則必須將類型設置為checkbox