个人中心
gpt4 book ai didi

javascript - 在 ng-disabled 上清除单选按钮

转载 作者：行者123 更新时间：2023-11-30 14:54:34 25 4
gpt4 key购买 nike

下面是我如何实现我从 Ng-repeat hiding radio button based on other radio answers selected 修改的代码.我需要帮助的是在删除/禁用单选按钮时清除该单选按钮==该答案为真。

如果用户从 Q3 开始并选择 answer31 然后返回到 Q1 并选择 answer11，则 question.selectedAnswer 仍显示为 answer31。

感谢任何帮助

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 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.isDisabled = (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];
        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,
        }, {
          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.isDisabled">
        <input type="radio"
          ng-change="select(question, answer)"
          ng-disabled="answer.isDisabled"
          ng-model="question.selectedAnswer" 
          ng-value="answer.answertxt" />
          <span>{{answer.answertxt}}</span>
      </div>
    </div>
  </div>

</body>

</html>

更新

我想确保我的意图是明确的。

如果用户从 Q1 开始并在 Q1 中选择“answer11”，您可以看到在 Q3 中“answer31”消失了。使用户无法选择“answer31”

但是如果用户从 Q3 开始并在 Q3 中选择“answer31”，即使用户在 Q1 中选择了“answer11”(这会使答案消失)，答案仍然被选中。在后端“answer31”仍然被选中。

请让我知道这是否有意义。查看收到的其中一个答案，解决方案可能是隐藏 Q3，直到在 Q1 中做出选择。这可能是一个不同的问题。

最佳答案

我不确定我是否完全理解您的目的。

但我制作了一个 fiddle ，也许能帮到你。

Check this fiddle 

$scope.showQuestion = function(index, answer){
    $scope.answerArr.length = index;
    var questionNum = 0;    //  for innitializing radio after this question
    angular.forEach($scope.questions, function(question){
        if(index < questionNum){
            delete question.selectedAnswer;
        }
        questionNum++;
    });
    $scope.answerArr.push(answer);
};

这是你想做的吗？

如果没有，请给我一些反馈。

我希望我已经理解您想要什么，并且这个 fiddle 离您的目的很近。 :)

.

.

.

已更新

首先，对于我对您的问题的误解，我们深表歉意。

我想也许这一次，我将带给你的 fiddle ，几乎符合你的意图。

Updated fiddle

您可以测试“Q1”或“Q2”的复选框。

但在这个 fiddle 中，处理 $scope.questions 的方式与你的不同。

因此，即使我在每一行都添加了注释，但理解我的代码可能还是太难了。

此外，我开始编程的时间很短，您可能认为这是一种“硬编码”。 :D

.

.

已更新2

This is finally well working fiddle

希望能对你有点帮助，或者给你带来一个好的提示。

关于javascript - 在 ng-disabled 上清除单选按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47521169/

25 4 0
文章推荐： javascript - 如何使用 AJV 获取当前/编译的模式？
文章推荐： c# - 如何使用 xaml 将数据网格绑定(bind)到 collectionviewsource
文章推荐： javascript - apigClientFactory 未定义
文章推荐： javascript - 如何防止从 dopostback 关闭 Bootstrap 模式？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com