javascript - 如何将 ng-show 与复选框一起使用

Question

我已经尝试了所有我能找到的解决方案，但我陷入困境。我有 2 个复选框，HBO 和 Marvin。 Marvin 需要显示一个 div。 HBO不需要展示任何东西。它一直有效，直到我需要单击该复选框两次才能显示/隐藏它。通常这将是 $apply() 问题，但情况似乎并非如此。我相信我没有正确更新模型。我忘了提及，当另一个为 true 时，复选框需要重置为 false。 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;
            //})
        }
    };

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