Question

我正在使用AngularJS构建一个网站，并正在创建一个调查，以便在注册页面上收集用户信息。调查中的每个问题都包含四个无线电盒，用户必须选择一个。每个单选框的值都是0-3。这是页面的HTML：

<form ng-submit="submitForm()">
    <div class="row 50%" align="left">
        <fieldset class="radiogroup">
            <legend>Data Structures</legend>
                <ul>
                <li><label class="radio-inline"><input value="0" ng-model="$parent.dataStructures" type="radio" name="optradio">Not familiar with what data structures are.</label></li>
                <li><label class="radio-inline"><input value="1" ng-model="$parent.dataStructures" type="radio" name="optradio">Can explain and use Arrays</label></li>
                <li><label class="radio-inline"><input value="2" ng-model="$parent.dataStructures" type="radio" name="optradio">Familiar with the space and time</label></li>
                <li><label class="radio-inline"><input value="3" ng-model="$parent.dataStructures" type="radio" name="optradio">Knowledge of advanced data structures</label></li>
                </ul>                             
        </fieldset>
    </div>

    <div class="row 50%" align="left">
        <fieldset class="radiogroup">
            <legend>Data Structures Test</legend>
                <ul>
                <li><label class="radio-inline"><input value="0" ng-model="$parent.algorithms" type="radio" name="optradio">Not familiar with what data structures are.</label></li>
                <li><label class="radio-inline"><input value="1" ng-model="$parent.algorithms" type="radio" name="optradio">Can explain and use Arrays</label></li>
                <li><label class="radio-inline"><input value="2" ng-model="$parent.algorithms" type="radio" name="optradio">Familiar with the space and time tradeoffs</label></li>
                <li><label class="radio-inline"><input value="3" ng-model="$parent.algorithms" type="radio" name="optradio">Knowledge of advanced data structures</label></li>
                </ul>                             
        </fieldset>
    </div>

    <div class="row">
        <div class="12u">
            <ul class="buttons">
                <input type="submit" value="Register" class="button" />
            </ul>
        </div>
    </div>
</form>

这是submitForm()函数：

$scope.submitForm = function () {
      console.log("Data Structures Value " + $scope.dataStructures);
      console.log("Algorithms Value " + $scope.algorithms);
    };

到目前为止，这段代码正在运行。我可以在第一组中选择一个值（dataStructures），然后我可以在第二组（算法）中选择一个值，并按预期打印出所选的选项。问题是，一旦选择了来自不同组的放射性单体，第一组的选项就会被取消选择，如下所示：

让我感到惊讶的是，控制台仍会为所选项目打印正确的值（如果是这些图像，则为2和1）。

如何在用户选择其他组中的内容时保留第一组中的选择？我想在不使用表单中的表单的情况下执行此操作，因为我当前执行Auth的代码并不真正使用该设置。谢谢！

Answer 1

每组单选按钮应具有不同的name值。

例如，您可以这样做：

    <fieldset class="radiogroup">
        <legend>Data Structures</legend>
            <ul>
            <li><label class="radio-inline"><input value="0" ng-model="$parent.dataStructures" type="radio" name="optradio">Not familiar with what data structures are.</label></li>
            <li><label class="radio-inline"><input value="1" ng-model="$parent.dataStructures" type="radio" name="optradio">Can explain and use Arrays</label></li>
            <li><label class="radio-inline"><input value="2" ng-model="$parent.dataStructures" type="radio" name="optradio">Familiar with the space and time</label></li>
            <li><label class="radio-inline"><input value="3" ng-model="$parent.dataStructures" type="radio" name="optradio">Knowledge of advanced data structures</label></li>
            </ul>                             
    </fieldset>

    <fieldset class="radiogroup">
        <legend>Data Structures Test</legend>
            <ul>
            <li><label class="radio-inline"><input value="0" ng-model="$parent.algorithms" type="radio" name="optradio1">Not familiar with what data structures are.</label></li>
            <li><label class="radio-inline"><input value="1" ng-model="$parent.algorithms" type="radio" name="optradio1">Can explain and use Arrays</label></li>
            <li><label class="radio-inline"><input value="2" ng-model="$parent.algorithms" type="radio" name="optradio1">Familiar with the space and time tradeoffs</label></li>
            <li><label class="radio-inline"><input value="3" ng-model="$parent.algorithms" type="radio" name="optradio1">Knowledge of advanced data structures</label></li>
            </ul>                             
    </fieldset>

这将允许每组按钮保留其自己的值。

RadioBox组未显示为已选定

1 个答案: