选择基于广播回答的Ng重复隐藏单选按钮 [英] Ng-repeat hiding radio button based on Radio answer selected

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

问题描述

我需要一些帮助，试图找出如果在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 ，答案：83493}，{answertxt：answer12，aId：1223}，{answertxt：answer13，aId：1223}]}，{questiontxt：'请选择你喜欢的活动'，qid：5678，答案：[ {答案：答案21，答案：90886}，答案：答案22， ， aId：32342}，{answertxt：answer32，aId：79130}]}]; }

<！DOCTYPE html>< html ng-app =plunker>< head> < meta charset =utf-8/> < title> AngularJS Plunker< / title> <脚本> document.write（'< base href =''+ document.location +'/>'）; < /脚本> < link rel =stylesheethref =style.css/> < script data-require =angular.js@1.3.xsrc =https://code.angularjs.org/1.3.14/angular.jsdata-semver =1.3.14>< /脚本> < script src =app.js>< / script>< / head>< body ng-controller =MainCtrl> < div ng-repeat =问题中的问题> < div class =row> <峰; br /><跨度> Q {{$索引+ 1}}。 {{question.questiontxt}}< /跨度> < / DIV> < div ng-repeat =有问题的答案。答案> < input type =radiovalue ={{answer.answertxt}} {{$ parent。$ index}}ng-model =question.selectedAnswerng-value ={{answer.answertxt}} />{{answer.answertxt}}< / div> < / div>< / body>< / html>

一个简单的方法是用两个新数组''hides'和'removed'来扩充你的'答案'数据结构，它们在选择时将被禁用或者通过大小写删除有针对性地回答其他问题。例如， 

  ... 
答案：[{
 answertxt：answer11，
 aId：83493，
隐藏：[{
 qid：5678，
 aId：67107 
}]，
删除：[{
 qid： 4321，
 aId：32342 
}] 
}，
 ...

answer11隐藏answer22并删除answer31。


然后，您的html会归结为以下显示逻辑： 

 < div ng-repeat =answer.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（问题，答案）中的答案选择上设置。

完整的实例：

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];}}}}函数doHide（q，a）{if（a .hides&& a.hides.length）{ for（var i = 0;我< 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

<！DOCTYPE html>< html ng-app =plunker>< head> < meta charset =utf-8/> < title> AngularJS Plunker< / title> <脚本> document.write（'< base href =''+ document.location +'/>'）; < /脚本> < link rel =stylesheethref =style.css/> < script data-require =angular.js@1.3.xsrc =https://code.angularjs.org/1.3.14/angular.jsdata-semver =1.3.14>< /脚本> < script src =script.js>< / script>< / head>< body ng-controller =MainCtrl> < div ng-repeat =问题中的问题> < div class =row> <峰; br /><跨度> Q {{$索引+ 1}}。 {{question.questiontxt}}< /跨度> < / DIV> < div ng-repeat =有问题的答案。答案> < div ng-if =！answer.isRemoved> < input type =radiong-change =select（question，answer）ng-disabled =answer.isDisabledng-model =question.selectedAnswerng-value =answer.answertxt/> < strike ng-if =answer.isDisabled> {{answer.answertxt}}< / strike> < span ng-if =！answer.isDisabled> {{answer.answertxt}}< / span> < / DIV> < / DIV> < / div>< / body>< / 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重复隐藏单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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