基于所选单选答案的 Ng-repeat 隐藏单选按钮

Question

我需要一些帮助来弄清楚如果在 ng-repeat 块中选择了其他答案时如何隐藏答案。例如在下面的代码中。如果用户在问题 1 中选择 answer11，则在问题 2 中，只有 answer21 可从问题下列出的可能答案中获得。

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
        }, {
          answertxt: "answer12",
          aId: 1223
        }, {
          answertxt: "answer13",
          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>

Answer 1

可以添加属性比如：

disables: [{ selectedAnswer: 83493,otherQ: 5678, otherAnswerId: 90886 }]

每个问题以及每个单选ng-disbled和ng-change

方法是查看上面所有的disables，然后查看相应的其他问题和其他答案，看当前选择的答案是否与禁用对象[=17]中的selectedAnswer相匹配=]

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


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

    $scope.disableMatches = function(question, answer) {
      let selectedId = question.selectedAnswer;
      question.disables.forEach(function(o) {
        let otherQ = $scope.questions.find(function(q) {
          return q.qid == o.otherQ
        });
        let otherAnswer = otherQ.Answer.find(function(ans) {
          return ans.aId === o.otherAnswerId
        })
        otherAnswer.disabled = selectedId == o.selectedAnswer;
      });
    }

    $scope.questions = [{
        questiontxt: 'Please select your Age range',
        qid: 1234,
        disables: [{
          selectedAnswer: 83493,
          otherQ: 5678,
          otherAnswerId: 90886
        }],
        Answer: [{
          answertxt: "answer11  Disables answer 21",
          aId: 83493
        }, {
          answertxt: "answer12",
          aId: 1223
        }, {
          answertxt: "answer13",
          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>
  </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">
      <label>
      <input type="radio"
      name="radio{{$parent.$index}}"
      ng-change="disableMatches(question)"
      ng-disabled="answer.disabled"
      ng-model="question.selectedAnswer" 
      ng-value="{{answer.aId}}" />{{answer.answertxt}}</label>
    </div>
  </div>

</body>

</html>

Answer 2

一种直接的方法是使用两个新数组 'hides' 和 'removes' 来扩充您的 'answer' 数据结构，在选择时会禁用或删除目标其他问题的答案。例如，

...
Answer: [{
  answertxt: "answer11",
  aId: 83493,
  hides: [{
    qid: 5678,
    aId: 67107
  }],
  removes: [{
    qid: 4321,
    aId: 32342
  }]
},
...

answer11 隐藏 answer22 并删除 answer31。
然后，您的 html 将归结为以下显示逻辑：

<div ng-repeat="answer in question.Answer">
  <div ng-if="!answer.isRemoved">
    <input type="radio"
           ng-change="select(question, answer)"
           ng-disabled="answer.isDisabled"
           ng-model="question.selectedAnswer" 
           ng-value="answer.answertxt" />
    <strike ng-if="answer.isDisabled">{{answer.answertxt}}</strike>
    <span ng-if="!answer.isDisabled">{{answer.answertxt}}</span>
  </div>
</div>

其中 isRemoved 和 isDisabled 标志在 select(question, answer) 中的答案选择中设置。

完整的工作示例：

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


app.controller('MainCtrl', ['$scope',
  function($scope) {
    
    function getAnswer(qid, aid) {
        var qs = $scope.questions, q;
        for (var i = 0; i < qs.length; ++i) {
          if (qs[i].qid === qid) {
            q = qs[i];
            break;
          }
        }
        if (q) {
          var as = q.Answer;
          for (i = 0; as.length; ++i) {
            if (as[i].aId === aid) {
              return as[i];
            }
          }
        }
    }
    
    function doHide(q, a) {
      if (a.hides && a.hides.length) {
        for (var i = 0; i < a.hides.length; ++i) {
          var h = a.hides[i],
              answer = getAnswer(h.qid, h.aId);
          if (answer) {
            answer.isDisabled = (q.selectedAnswer == a.answertxt);
          }
        }
      }
    }
    
    function doRemove(q, a) {
      if (a.removes && a.removes.length) {
        for (var i = 0; i < a.removes.length; ++i) {
          var r = a.removes[i],
              answer = getAnswer(r.qid, r.aId);
          if (answer) {
            answer.isRemoved = (q.selectedAnswer == a.answertxt);
          }
        }
      }
    }
    
    $scope.select = function (q, a) {
      var as = q.Answer;
      
      for (var i = 0; i < as.length; ++i) {
        var answer = as[i];
        doHide(q, answer);
        doRemove(q, answer);
      }
    };

    $scope.questions = [{
        questiontxt: 'Please select your Age range',
        qid: 1234,
        Answer: [{
          answertxt: "answer11",
          aId: 83493,
          hides: [{
            qid: 5678,
            aId: 67107
          }],
          removes: [{
            qid: 4321,
            aId: 32342
          }]
        }, {
          answertxt: "answer12",
          aId: 1223,
          removes: [{
            qid: 4321,
            aId: 79130
          }]
        }, {
          answertxt: "answer13",
          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="script.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">
      <div ng-if="!answer.isRemoved">
        <input type="radio"
          ng-change="select(question, answer)"
          ng-disabled="answer.isDisabled"
          ng-model="question.selectedAnswer" 
          ng-value="answer.answertxt" />
          <strike ng-if="answer.isDisabled">{{answer.answertxt}}</strike>
          <span ng-if="!answer.isDisabled">{{answer.answertxt}}</span>
      </div>
    </div>
  </div>

</body>

</html>

基于所选单选答案的 Ng-repeat 隐藏单选按钮

Ng-repeat hiding radio button based on Radio answer selected

html

javascript

angularjs

angularjs-ng-repeat