如何使用带有复选框的 ng-show答案

【问题标题】：how to use ng-show with checkboxes如何使用带有复选框的 ng-show
【发布时间】：2023-03-04 08:56:01
【问题描述】：

我已经尝试了所有我能找到的解决方案，但我被卡住了。我有 2 个复选框，HBO 和 Marvin。 Marvin 需要显示一个 div。 HBO 不需要展示任何东西。它一直有效，直到我需要单击复选框两次才能显示/隐藏。通常这将是一个 $apply() 问题，但似乎并非如此。我相信我没有正确更新模型。我忘了提到复选框需要在另一个为真时重置为假。 plunker

 var ctrl = this;
    ctrl.showMeMarvin = function () {
        if (ctrl.show === true) {
            //$timeout(function () {
            ctrl.marvin = false;
            ctrl.show = false;
            ctrl.hbo = false;
            //})
        }
        else {
            //$timeout(function () {
            ctrl.marvin = true;
            ctrl.show = true;
            ctrl.hbo = false;
            //})
        }
    };

    ctrl.showMeHBO = function () {
        if (ctrl.show === true) {
            // $timeout(function () {
            ctrl.show = false;
            ctrl.hbo = true;
            ctrl.marvin = false;
            //})
        }
        else {
            //$timeout(function () {
            ctrl.marvin = false;
            ctrl.hbo = true;
            //})
        }
    };

【问题讨论】：

应该使用ng-checked 而使用ng-model plnkr.co/edit/YwWsos2UyvJLh5s1s0pB?p=preview 你可以在这里找到github链接github.com/netman92/angular.js/commit/…
我忘了说复选框需要在另一个为真时重置为假。
您是否试图让内容仅在选中 Marvin 而 HBO 未选中时才可见？例如plnkr.co/edit/Y0DNwmFr9fdwFhLLYPUS?p=preview
是的，这是正确的。请看更新
啊，当另一个复选框设置为 true 时，没有看到您关于将一个复选框重置为 false 的评论。如果是这种情况，您应该使用单选输入而不是复选框

标签： javascript angularjs checkbox

【解决方案1】：

只需像这样更改 div ng-show：

 <div class="col-xs-12" ng-show="checkedHBO == 1">

它无需任何额外的函数调用即可工作。

编辑：要让它使用条件来重置上一个选择的值，你可以使用这个：

<div ng-controller="ShowController as ctrl">
  <div class="col-xs-12">
    <label for="checkedHBO" class="ts-label">HBO</label>
    <input id="checkedHBO" name="mygroup" type="radio" value="hbo"  ng-model="checkedHBO" ng-change="checkedMarvin = undefined"/>
    <label for="checkedMarvin" class="ts-label">Marvin</label>
    <input id="checkedMarvin" name="mygroup" type="radio" value="marvin" ng-model="checkedMarvin" ng-change="checkedHBO = undefined"/>
  </div>
  <div class="col-xs-12" ng-show="checkedHBO">
    <center>
      <div class="jumbotron">
                 DIV 1
                </div>
      <div class="jumbotron">
                  DIV 2
                </div>
      <div class="jumbotron">
                  DIV 3
                </div>
    </center>
  </div>
</div>

【讨论】：

你能带我看看吗？它不适合我
检查此示例以满足您的第二个要求：plnkr.co/edit/fYWRS52CIGcJznLlfnbL?p=preview
请回答。实际上我需要保留不同名称的 ng-models
如何在 ng-model 保持原样的情况下做到这一点。其实我觉得没必要
更新了答案，使模型在初始 plnkr 中定义

【解决方案2】：

您应该使用单选输入而不是复选框。 http://plnkr.co/edit/hE68w9RKUoFamAWGgRzR?p=preview

<input name="radio" id="checkedHBO" type="radio"  ng-model="ctrl.show" ng-value="false" />
<input name="radio" id="checkedMarvin" type="radio" ng-model="ctrl.show" ng-value="true"/>

【讨论】：