AngularJS根据ng-repeat块中的Radio答案隐藏/显示问题答案

【问题标题】：AngularJS Hide/Show questions based on Radio answers in ng-repeat blockAngularJS根据ng-repeat块中的Radio答案隐藏/显示问题
【发布时间】：2018-05-25 04:12:48
【问题描述】：

我正在边做边学角度，所以如果这是一个基本问题，请原谅。我想根据以前的问题答案隐藏问题。例如 Q1 首先出现，如果用户选择 answer11 并且 Q2 出现。如果用户选择 answer12 Q2 不会出现。我还想确保清除单选按钮。本质上是创建一个工作流。在我想隐藏问题时，我在模型中放入的先前问题可能是一个解决方案。

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


app.controller('MainCtrl', ['$scope',
  function($scope) {


    $scope.questions = [{
        questiontxt: 'Please select your Age range',
        qid: 1234,
        Answer: [{
          answertxt: "answer11",
          aId: 83493,
           removes: [{
              qid: 5678,
              }]
        }, {
          answertxt: "answer12",
          aId: 1223
        }]
      },
      {
        questiontxt: 'Please select your favorite activity',
        qid: 5678,
        Answer: [{
          answertxt: "answer21",
          aId: 90886
        }, {
          answertxt: "answer22",
          aId: 67107
        }]
      },
      {
        questiontxt: 'Please select your favorite food',
        qid: 4321,
        Answer: [{
          answertxt: "answer31",
          aId: 32342
        }, {
          answertxt: "answer32",
          aId: 79130
        }]
      }
    ];
  }
]);

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

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div ng-repeat="question in questions">
    <div class="row">
      <br/><span>Q{{$index+1}}. {{question.questiontxt}}</span>
    </div>
    <div ng-repeat="answer in question.Answer">
      <input type="radio" value="{{answer.answertxt}}{{$parent.$index}}" ng-model="question.selectedAnswer" ng-value="{{answer.answertxt}}" />{{answer.answertxt}}
    </div>
  </div>

</body>

</html>

更新

我正在更新问题，因为我不清楚。如果用户在 Q1 中选择 answer11，则会出现 Q2。如果用户选择 answer12 则 Q2 消失但 Q3 仍然可见。 Q2 出现的唯一方式是当用户选择 answer11 时。我正在尝试根据模型中的内容创建问题之间的依赖关系。

【问题讨论】：

标签： angularjs angularjs-ng-repeat

【解决方案1】：

只需创建一个迭代器，并在每次回答问题时递增 - 如下所示：

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


app.controller('MainCtrl', ['$scope',
  function($scope) {
    $scope.questionNo = 0;

    $scope.questions = [{
        questiontxt: 'Please select your Age range',
        qid: 1234,
        Answer: [{
          answertxt: "answer11",
          aId: 83493,
           removes: [{
              qid: 4321,
              }]
        }, {
          answertxt: "answer12",
          aId: 1223
        }]
      },
      {
        questiontxt: 'Please select your favorite activity',
        qid: 5678,
        Answer: [{
          answertxt: "answer21",
          aId: 90886
        }, {
          answertxt: "answer22",
          aId: 67107
        }]
      },
      {
        questiontxt: 'Please select your favorite food',
        qid: 4321,
        Answer: [{
          answertxt: "answer31",
          aId: 32342
        }, {
          answertxt: "answer32",
          aId: 79130
        }]
      }
    ];

    $scope.incrementQuestionNo = function() {
        if ($scope.questionNo != $scope.questions.length-1)
        {
            $scope.questionNo++;
        }
    }
  }
]);

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

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div>
    <div class="row">
      <br/><span>Q{{questionNo+1}}. {{questions[questionNo].questiontxt}}</span>
    </div>
    <div ng-repeat="answer in questions[questionNo].Answer">
      <input type="radio" ng-model="questions[questionNo].selectedAnswer" ng-change="incrementQuestionNo()" ng-value="{{answer.answertxt}}" />{{answer.answertxt}}
    </div>
  </div>

</body>

</html>

顺便说一句，ng-value 和 value 是互斥的。阅读此answer。

【讨论】：

【解决方案2】：

将属性添加到问题数组中，并使用布尔值显示/隐藏。并使用 ng-change 相应地更新它。

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


app.controller('MainCtrl', ['$scope',
  function($scope) {

    $scope.questions = [{
        questiontxt: 'Please select your Age range',
        qid: 1234,
        show: true,
        Answer: [{
          answertxt: "answer11",
          aId: 83493,
           removes: [{
              qid: 4321,
              }]
        }, {
          answertxt: "answer12",
          aId: 1223
        }]
      },
      {
        questiontxt: 'Please select your favorite activity',
        qid: 5678,
        show: false,
        Answer: [{
          answertxt: "answer21",
          aId: 90886
        }, {
          answertxt: "answer22",
          aId: 67107
        }]
      },
      {
        questiontxt: 'Please select your favorite food',
        qid: 4321,
        show: false,
        Answer: [{
          answertxt: "answer31",
          aId: 32342
        }, {
          answertxt: "answer32",
          aId: 79130
        }]
      }
    ];

   $scope.updateQuestions = function(index){
        // you write the rest
        // use the index to get the current question
        // get the selected answer
        // set the next question's show to true or false

        // for example (not a solution)
        if(index === 0){
           $scope.questions[1].show = true;
        }
   }
  }
]);

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

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div ng-repeat="question in questions track by $index">
    <div ng-if="question.show">
    <div class="row">
      <br/><span>Q{{$index+1}}. {{question.questiontxt}}</span>
    </div>
    <div ng-repeat="answer in question.Answer">
      <input type="radio" value="{{answer.answertxt}}{{$parent.$index}}" ng-model="question.selectedAnswer" ng-value="{{answer.answertxt}}" ng-change="updateQuestions($index)" />{{answer.answertxt}}
    </div>
    </div>
  </div>

</body>

</html>

【讨论】：