嵌套的ng-repeat和无线电或复选框输入无效

时间:2016-08-22 14:58:00

标签: angularjs asp.net-mvc-4

我试图通过嵌套的ng-repeat显示问题列表及其选择,我看到了很多类似的问题,但仍无法解决我的问题。我的问题是我可以看到问题列表,但选项没有显示出来,在开发人员工具中我只能看到注释的ng-repeat代替选择。

这是我的观点

<div ng-repeat ="question in questions track by $index" class="panel panel-default" ng-show="showQuestions">
    <div class="panel-heading">
        <div class="panel-title">
            <a href="div#{{$index}}" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" >
                {{question.QuestionTxt}}
            </a>
            <div class="row height"></div>
            <div class="row" ng-show="question.QuestionTypeTxt == 'RadioButton'">
                    <div class="col-xs-3" ng-repeat ="answer in questions.QuestionAnswers track by $index">
                        <input type="radio" ng-model="selectedChoice.choice" ng-value="{{answer.AnswerTxt}}" name="{{question.QuestionTxt}}"/>{{answer.AnswerTxt}}
                    </div>
            </div>
            <div class="row" ng-show="question.QuestionTypeTxt == 'Checkbox'">
                    <div class="col-xs-3" ng-repeat ="answer in questions.QuestionAnswers track by $index">
                        <input type="checkbox" ng-model="selectedChoice.choice" ng-value="{{answer.AnswerTxt}}" name="{{question.QuestionTxt}}"/>{{answer.AnswerTxt}}
                    </div>
            </div>
        </div>
    </div>
</div>

这是我的控制器

$scope.questions = [];
                $scope.selectedChoice = { choice:"" };

$scope.addQuestions = function () {
       $scope.showQuestions = true;
        rmat3Service.getQuestionsForSection().then(function (data) {
              angular.forEach(data,function(a) {
                     $scope.questions.push(a);
               });
        });
}

这是我的Json数据:

var questions = new List<Question>();
var answers = new List<QuestionAnswer>();
answers.Add(new QuestionAnswer()
{
     AnswerTxt = "Yes",
});
answers.Add(new QuestionAnswer()
{
     AnswerTxt = "No"
});
answers.Add(new QuestionAnswer()
{
     AnswerTxt = "Yes Verified"
});
answers.Add(new QuestionAnswer()
{
     AnswerTxt = "Not Applicable"
});
questions.Add(new Question()
{
     QuestionId = 1,
     QuestionTxt = "Are aisles clear of product on the floor?",
                    QuestionTypeTxt = "RadioButton",
                    QuestionAnswers = answers
});
questions.Add(new Question()
{
     QuestionId = 2,
     QuestionTxt = "Automated Car Wash",
     QuestionTypeTxt = "Checkbox",
     QuestionAnswers = answers
});
return Json(questions, JsonRequestBehavior.AllowGet);

1 个答案:

答案 0 :(得分:1)

问题在于您尝试循环不存在的questions.QuestionAnswers。它应该是question.QuestionAnswers

<div class="col-xs-3" ng-repeat ="answer in question.QuestionAnswers track by $index">