ng-repeatの複数のラジオボタンの値を確認してください

私はデフォルトでラジオボタンの選択に問題があります。ng-repeatの複数のラジオボタンの値を確認してください

このJSONデータを私の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, 
    }] 
}];

次、私は答えに基づいてラジオボタンを選択する必要があります。

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

私はそれを行うことができません。私が間違ったことを誰にでも教えてもらえますか？

出典

2017-08-22 user1268130

入力データに問題があると思います。 JSONをチェックしてください。あなたの必要に応じてそれを変更してください。 –

どうすれば動作するはずですか？ – user1268130

出力をどのようにするべきかを明確にすることができます。私が助けてくれるように –

1）ドキュメントから、ngModelと一緒ngCheckedを使用しないでください：このディレクティブは、これは予期しない動作を引き起こす可能性がとして、ngModelと一緒に使用してはならないことを

注意を。

2）入力に値属性はありません。対応する入力にvalue="Yes"/value="No"属性を追加し、ngModelと一緒に使用することができます。

UPDATE：作業するコードを追加切り取ら：

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>

出典

2017-08-22 13:48:31

私はこれを試しましたが、うまくいきませんでした。 jsonをループすると、最後の質問回答がチェックされます。残っている他の質問はチェックされていません – user1268130

私はこの問題が名前属性である可能性があると思います。 –

@ user1268130 'question = {{$ parent} $ index}} {{$ index}}'の代わりに 'name =" question {{$ parent。$ index + '_' + $ index}} '' ' ？ –

をあなたは間違って反復され、この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を使用しないでください。 ng-checkedの代わりにvalueまたはng-valueを使用してください。

これを確認してください。

出典

2017-08-22 14:13:06

名前属性を削除したところ、正常に機能しました。ありがとう – user1268130

ng-repeatの複数のラジオボタンの値を確認してください

答えて

関連する問題