Question

我在选择单选按钮时遇到问题。

以下是我的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数据，我需要根据答案选择单选按钮。

<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和ngModel：

请注意，此指令不应与ngModel一起使用这可能会导致意外行为。

2）您的输入没有值属性。您可以将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

＆＃13;

// 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,
    }]
  }]
})

＆＃13;

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

＆＃13;

请勿使用ng-model和ng-checked。使用value或ng-value代替ng-checked。

检查一下。

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

2 个答案: