Question

我有以下代码用于学生的作业状态标记。我的问题是没有必要标记所有学生。用户可能会标记某些可能不会。现在如何验证必须至少标记一个用户，否则应显示一些验证消息。

提前致谢！

<div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Complete</th>
                        <th>Incomplete</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="record in studentRecord.AssignmentStatus">
                        <td>{{record.Name}}</td>
                        <td><input type="radio" value=Complete ng-model="record.Status" /></td>
                        <td><input type="radio" value=Incomplete ng-model="record.Status" /></td>
                    </tr>
                </tbody>
            </table>
            <button class="btn btn-primary pull-right" ng-click="updateAssignment(studentRecord)">Submit</button>
        </div>

Answer 1

根据文件

https://docs.angularjs.org/api/ng/input/input%5Bradio%5D

试试吧

<form name="myForm">
<td><input type="radio" value="Complete" ng-model="record.Status" ng-required="true" /></td>
<td><input type="radio" value="Incomplete" ng-model="record.Status" ng-required="true" /></td>
<button ng-disabled="myForm.$invalid">Submit</button>
</form>

Answer 2

ThomasP1988几乎有它，但这里有一个例子。

<input type="radio" value="Incomplete" ng-model="record.Status" ng-required="true" />

这里的关键是使用＆＃39; ng-required＆＃39;你可以从＆＃39; formName。$ invalid＆＃39;中获取一个值，它将确定它是否通过了内置的角度验证指令。

http://jsfiddle.net/glandrum101/9gWR9/1/

以下是AngularJS中表单的文档：https://docs.angularjs.org/guide/forms

如果您进入自定义验证＆＃39;您可以看到一些可以在表单元素上使用的其他AngularJS验证指令。

Answer 3

<div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Complete</th>
                        <th>Incomplete</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="record in studentRecord.AssignmentStatus">
                        <td>{{record.Name}}</td>
                        <td><input type="radio" value=Complete ng-change="change()" ng-model="record.Status" /></td>
                        <td><input type="radio" value=Incomplete ng-change="change()" ng-model="record.Status" /></td>
                    </tr>
                </tbody>
            </table>
            <button class="btn btn-primary pull-right" ng-disabled="changeOfValue==0" ng-click="updateAssignment(studentRecord)">Submit</button>
        </div>

这就是我所做的检查是否有任何单选按钮被推送或使用的情况，然后在这种情况下，我会让用户继续提交。

PageController.prototype.change = function () {
        this.$scope.changeOfValue = 1;
    };

这使我的按钮启用或禁用。

感谢@ ThomasP1988和@ glandrum1010的帮助。我已经在角度方面学到了更多关于表单元素的知识，但我觉得这个问题不适用于这个问题。

Answer 4

这个建议似乎很好，但有问题。我们不能将ng-required放在ng-repeat内的单选按钮的情况下。正如你在小提琴中看到的那样，它要求选择两个单选按钮，这是不可能的。在我们希望在ng-repeat中选择任何一个东西的情况下，这个技巧通常都不好。 -

我不同意glandrum101（上述陈述的作者）。虽然这可能是真的，但您可以在控制器中添加一些代码以使其正常工作。

控制器：

Just put this code in the controller and use it with ng-change:

vm.setTrueFalseRadioState = setTrueFalseRadioState;

function setTrueFalseRadioState(answer) {
  angular.forEach(vm.AssignmentStatus, function(a) {
    if (a.Status !== answer.Status) {
      a.Status = false;
    }
  });
}

HTML：

<input type="radio" id="myChoice_{{$index + 1}}" name="response" ng-required="!record.Status" ng-change="studentRecord.setTrueFalseRadioState(record)" value="true" ng-model="record.Status" />

I made a sample plunker to demonstrate this

如何验证ng-repeat中的单选按钮？

4 个答案:

控制器：

HTML：