Ng-repeat 隐藏单选按钮基于选择的电台答案 [英] Ng-repeat hiding radio button based on Radio answer selected

查看：21
本文介绍了Ng-repeat 隐藏单选按钮基于选择的电台答案的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

var app = angular.module('plunker', []);app.controller('MainCtrl', ['$scope',功能($范围){$scope.questions = [{questiontxt: '请选择您的年龄范围',qid: 1234,回答: [{answertxt: "answer11",编号:83493}, {answertxt: "answer12",编号:1223}, {answertxt: "answer13",编号:1223}]},{questiontxt: '请选择您最喜欢的活动',qid: 5678,回答: [{answertxt: "answer21",编号:90886}, {answertxt: "answer22",编号:67107}]},{questiontxt: '请选择您最喜欢的食物',qid: 4321,回答: [{answertxt: "answer31",编号:32342}, {answertxt: "answer32",编号:79130}]}];}]);

<html ng-app="plunker"><头><meta charset="utf-8"/><title>AngularJS Plunker</title><脚本>document.write('<base href="' + document.location + '"/>');<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 src="app.js"></script><body ng-controller="MainCtrl"><div ng-repeat="问题中的问题"><div class="row"><br/><span>Q{{$index+1}}.{{question.questiontxt}}</span>

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

</html>

解决方案

一种直接的方法是使用两个新数组隐藏"和移除"来扩充您的答案"数据结构，选择后将禁用或根据情况删除其他问题的目标答案.例如，

<代码>...回答: [{answertxt: "answer11",编号:83493，隐藏:[{qid: 5678,编号:67107}],删除:[{qid: 4321,编号:32342}]},...

answer11 隐藏 answer22 并删除 answer31.
您的 html 将归结为以下显示逻辑:

<div ng-if="!answer.isRemoved"><输入类型=收音机"ng-change="选择(问题，答案)"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>

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

完整的工作示例:

var app = angular.module('plunker', []);app.controller('MainCtrl', ['$scope',功能($范围){功能getAnswer(qid，援助){var qs = $scope.questions, q;for (var i = 0; i 

<html ng-app="plunker"><头><meta charset="utf-8"/><title>AngularJS Plunker</title><脚本>document.write('<base href="' + document.location + '"/>');<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 src="script.js"></script><body ng-controller="MainCtrl"><div ng-repeat="问题中的问题"><div class="row"><br/><span>Q{{$index+1}}.{{question.questiontxt}}</span>

<div ng-repeat="answer in question.Answer"><div ng-if="!answer.isRemoved"><输入类型=收音机"ng-change="选择(问题，答案)"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>

</html>

I need some help trying to figure out how to hide answers if other answers are selected when items are in ng-repeat block. For instance in the below code. If a user selects answer11 in Question 1, then in Question 2 only answer21 is available from the possible answers listed under the question. 

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>

解决方案

A straight-forward way would be to augment your 'answer' data structures with two new arrays, 'hides' and 'removes', which upon selection would disable or by case remove the targeted answers of other questions. For example,

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

answer11 hides answer22 and removes answer31.
Your html would then boil down to the following display logic:

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

where the isRemoved and isDisabled flags are set on answer selection in select(question, answer).

Full working example:

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 隐藏单选按钮基于选择的电台答案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆