嵌套 ng-repeat，单选按钮验证

Question

我有两个嵌套的 ng-repeat 生成多个问题，每个问题都包含一堆单选按钮。当没有为某个问题选择单选时，我无法想出一种有效的方法来显示验证错误消息，并在用户点击选择时获取所有选定的选项

    <ul>
      <li ng-repeat="question in questionModel.questionaire">{{question.question}}
      <span style = "color:red" ng-show = "!!!ANOTHER CONDITION HERE!!! && questionModel.submitClicked != false">Please choose an answer </span>

          <ul>

            <li ng-repeat="answer in question.answers">
              <input  type="radio"
                      ng-click="questionModel.handleChange(answer)"
                      value={{answer}}
                      name="radio_{{$parent.$index}}"
                      required>
              {{answer}}
            </li>
          </ul>

      </li>
    </ul>

你建议我如何处理这个问题？在ul 上使用getElementById 然后检查所有子节点？听起来确实很乱，但很容易，我可以轻松获得所有被选中的按钮。有没有更好的方法来处理验证错误消息？

如果所有单选按钮都在同一个问题下很容易，我可以在单选按钮上使用 ng-model。

编辑：添加信息

控制器：

  myApp.controller('questionController', function($scope, $http, toServer){

    $scope.questionModel = {
      questionaire: [],
      submitClicked: false,

      handleChange: function(ans){
        console.log(ans);
      },

      submit: function(){
        this.submitClicked = true;
        console.log(JSON.stringify(this.questionaire));
      }
    }

    toServer.get_All_Questions(function(response){
      $scope.questionModel.questionaire = response;
    });

  })

我为 ajax 调用创建的服务：

//this service handle all the ajax call to server
myApp.factory('toServer', function($http){

  return {

    get_All_Questions: function(callback){
      var url = "/health1/server/questions";

      $http.get(url).success(function(response){
        response.forEach(function(item){
          item.answers = (item.answers != null) ? item.answers.split(",") : [];
          item.answered = false;
        });
        callback(response);
      }).error(function(response){
        console.log("error " + response)
      });
    }

  }

});

$scope.questionModel.questionaire（来自服务器的响应）的结构是一个 json 数组：

[{id: "1", question: "what's your name?", answers: ["tom", "mary"]},
{id: "2", question: "what's your age?", answers: [1, 2]}
]

Answer 1

没有属性可以识别问题是否已被回答。因此，我努力创建了isAnswered = true/false 这样的属性，并将其默认初始化为 false。

angular.forEach($scope.questionModel.questionaire, function(ques) {
    ques.isAnswered = false;
    return ques;
});

When an answer is selected, the function handleChange sets isAnswered = true.

handleChange: function(ans, ques){
    ques.isAnswered = true;
    console.log(ques);
},

最后，在提交点击时，条件检查提交是否被点击，如果有任何问题没有回答，它将显示以下消息：

<span style = "color:red" 
   ng-show = "questionModel.submitClicked && !question.isAnswered">
   Please choose an answer 
</span>

Working Plunker

Answer 2

这很简单 - 使用 ng-model 作为您的单选按钮：

<ul>
  <li ng-repeat="question in questionModel.questionaire" {{question.question}}
  <span style = "color:red" ng-show="!question.selectedAnswer && questionModel.submitClicked">Please choose an answer</span>
      <ul>
        <li ng-repeat="answer in question.answers">
          <input  type="radio"
                  ng-model="question.selectedAnswer"
                  ng-click="questionModel.handleChange(answer)"
                  value={{answer}}
                  name="radio_{{$parent.$index}}">
          {{answer}}
        </li>
      </ul>
  </li>
</ul>