AngularJS：检查单选按钮的值

Question

我已经使用AngularJS一段时间了。 我有一个单选按钮，它为用户提供选项和具有正确答案值的json数据。 我如何进行比较？

码：

var testControllers = angular.module('testControllers', []);

testControllers.controller('ListController', ['$scope', '$http', function($scope, $http) {
  $http.get('js/data.json').success(function(data) {
    $scope.questions = data;
    $scope.artistOrder = 'name';
  });
}]);

testControllers.controller('DetailsController', ['$scope', '$http','$routeParams' ,function($scope, $http, $routeParams) {
  $http.get('js/data.json').success(function(data) {
    $scope.questions = data;
    $scope.whichItem = $routeParams.itemId;
    $scope.parseInt = parseInt;
    if($routeParams.itemId > 0){
        $scope.prevItem = Number($routeParams.itemId) - 1;
    }
    else{
        $scope.prevItem = $scope.questions.length - 1;
    }


    if($routeParams.itemId < $scope.questions.length-1){
        $scope.nextItem = Number($routeParams.itemId) + 1;
    }
    else{
        $scope.nextItem = 0;
    }
  });
}]);

HTML：

<link rel="stylesheet" href="css/common.css" />
<section class="artistinfo">
    <div class="mcq" ng-model: "questions">
      <center><a href = "#details/{{prevItem}}" class = "button">PREV</a>
      <a href = "#details/{{nextItem}}" class = "button">NEXT</a></center>
      <div class = "qanda">
        <h3 class = "qnum">QUESTION {{parseInt(whichItem)+1}}</h3>
        <p class = "ques" math-jax-bind = "questions[whichItem].ques"></p>    
        <ul>
              <li class= "optlist" ng-repeat="item in questions[whichItem].opts">
              <label class="formgroup">
              <input type="radio" name = "q" ng-model = "$parent.selopt" value = "{{item.pos}}"><span math-jax-bind = "item.val"></span>
             </label>
             </li>
        </ul>
      </div>
      <center><a href = "#list" class = "button">List View</a></center>
      <p>{{selopt}}</p>
    </div>  
</section>

这是我拥有的JSON数据：

"opts":[  
    {  
      "pos":"A",
      "val":"3"
    },
    {  
      "pos":"B",
      "val":"6"
    },
    {  
      "pos":"C",
      "val":"9"
    },
    {  
      "pos":"D",
      "val":"0"
    }
    "answer":"B"
]

Answer 1

变量$parent.selopt包含选定的值（父范围的selopt ）。

如果需要说明：在选择值时，通过单击单选按钮，可以在指令的ng-model属性中指定的变量

<input type="radio" name = "q" ng-model = "$parent.selopt" value = "{{item.pos}}">

将使用所选值进行更新。

如果您想将其与opts.answer进行比较，则只需执行以下操作：

 $scope.questions.answer == $parent.selopt

请注意，您的JSON无效。

它应该是：

[{
    "pos": "A",
    "val": "3"
}, {
    "pos": "B",
    "val": "6"
}, {
    "pos": "C",
    "val": "9"
}, {
    "pos": "D",
    "val": "0"
}, {
    "answer": "B"
}]

您始终可以使用JSON Lint对其进行验证。