检查 ng-repeat 中多个单选按钮的值

Question

我在默认情况下 select 单选按钮的问题。

以下是我的json数据

var Result = [{
    "Questions": [{
        "Question": "question1",
        "Answer": "Yes"
    },
    {
        "Question": "question2",
        "Answer": "No"
    },
    {
        "Question": "question3",
        "Answer": null
    }]
},
{
    "Questions": [{
        "Question": "question1",
        "Answer": "Yes"
    },
    {
        "Question": "question3",
        "Answer": "No",
    },
    {
        "Question": "question4",
        "Answer": null,
    }]
}];

有了这个 json 数据，我需要 select 基于答案的单选按钮。

<div ng-repeat="item in Result">
<div class="col-xs-12" ng-repeat="question in item.Questions">
    <div class="input-group col-xs-12">
        <div>{{question.Question}}</div>
        <div>
            <span class="col-xs-4 col-sm-4 no-padding"><input type="radio" ng-model="question.Answer"  name="questions_{{$parent.$index}}_{{$index}}" ng-checked='question.Answer == "Yes"' /> <span>Yes</span></span>
            <span class="col-xs-4 col-sm-4 no-padding"><input type="radio" ng-model="question.Answer" name="questions_{{$parent.$index}}_{{$index}}" ng-checked='question.Answer == "No"' /> <span>No</span></span>
        </div>
    </div>
</div>
</div>

我做不到。谁能告诉我我做错了什么？

Answer 1

1) 不要使用 ngChecked together with ngModel，来自文档：

Note that this directive should not be used together with ngModel, as this can lead to unexpected behavior.

2) 您的输入没有 value 属性。您可以将 value="Yes"/value="No" 属性添加到相应的输入中，并与 ngModel.

一起使用

更新： 添加了工作代码片段：

angular.module('app', [])
.controller('mainController', function mainController($scope) {
  $scope.$parent.$index = 1;
  $scope.Questions = [{
        "Question": "question1",
        "Answer": "Yes"
    },
    {
        "Question": "question2",
        "Answer": "No"
    },
    {
        "Question": "question3",
        "Answer": null
    }];
    
});

<!-- JS -->
<script  src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>


<body ng-app="app">
  <div class="container" ng-controller="mainController">
    <div class="alert alert-info">
     <div class="col-xs-12" ng-repeat="question in Questions">
          <div class="input-group col-xs-12">
              <div>{{question.Question}}</div>
              <div>
                  <span class="col-xs-4 col-sm-4 no-padding"><input type="radio" ng-model="question.Answer"  name="questions_{{$parent.$index + '_' + $index}}" value="Yes" /> <span>Yes</span></span>
                  <span class="col-xs-4 col-sm-4 no-padding"><input type="radio" ng-model="question.Answer" name="questions_{{$parent.$index + '_' + $index}}" value="No" /> <span>No</span></span>
              </div>
          </div>
      </div>
    </div>
  </div>
</body>

Answer 2

你迭代不正确，检查这个plunker https://plnkr.co/edit/3wgJWFQCckBGNRRYzyjA?p=preview

// Code goes here

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

app.controller('mainCtrl', function($scope) {
  $scope.Questions = [{
    "Questions": [{
      "Question": "question1",
      "Answer": "Yes"
    }, {
      "Question": "question2",
      "Answer": "No"
    }, {
      "Question": "question3",
      "Answer": null
    }]
  }, {
    "Questions": [{
      "Question": "question1",
      "Answer": "Yes"
    }, {
      "Question": "question3",
      "Answer": "No",
    }, {
      "Question": "question4",
      "Answer": null,
    }]
  }]
})

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="mainCtrl">
  <div class="col-xs-12" ng-repeat="question in Questions">
    Set-{{$index+1}}
    <br/>
    <div ng-repeat="data in question.Questions">
      <label>
        <input type="radio" ng-model="data.Answer" value="Yes"> Yes
      </label>
      <label>
        <input type="radio" ng-model="data.Answer" value="No"> No
      </label>
      <label>
        <input type="radio" ng-model="data.Answer" value=null> Null
      </label>
      <br/>
    </div>
  </div>
</body>

</html>

不要使用 ng-model 和 ng-checked。使用 value 或 ng-value 而不是 ng-checked.

检查这个。

检查 ng-repeat 中多个单选按钮的值

check the value of multiple radio buttons in ng-repeat

angularjs

angularjs-ng-repeat