基于选择的无线电答案的重复隐藏单选按钮

时间：2017-11-26 14:37:24

标签： javascript html angularjs angularjs-ng-repeat

如果在项目处于ng-repeat块时选择了其他答案，我需要一些帮助来试图找出如何隐藏答案。例如，在下面的代码中。如果用户选择问题1中的答案11，那么在问题2中，只有答案21可从问题下列出的可能答案中获得。 

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>

2 个答案:

答案 0 :(得分：1)

可以添加如下属性：

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

每个问题以及每个广播的ng-disbled和ng-change

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

＆＃13;
＆＃13; 
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
        }]
      }
    ];
  }
]);
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

一种直截了当的方式是使用两个新阵列“隐藏”和“删除”来增加“回答”数据结构，这些数组在选择时会禁用或通过大小写删除其他问题的目标答案。例如，

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

answer11隐藏答案22并删除答案31。
然后你的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>

相关问题
最新问题