Как проверить переключатель внутри ng-repeat?

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

<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 3

Этот совет кажется хорошим, но есть проблема. Мы не можем поставить 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" />

Я сделал образец плунжера, чтобы продемонстрировать это

Answer 4

У ThomasP1988 в значительной степени есть это, но вот скрипка с примером.

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

Ключевым моментом здесь является то, что с помощью 'ng-required' вы можете получить значение обратно из 'formName. $ Invalid', которое определит, прошло ли оно встроенные директивы угловой проверки.

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

Вот документация для форм в AngularJS: https://docs.angularjs.org/guide/forms

Если вы перейдете в раздел "Пользовательская проверка", то увидите другие директивы проверки AngularJS, которые можно использовать в элементах формы.