【问题标题】:ng-hide or ng-show does not work if its controlled from within a ng-repeat如果从 ng-repeat 中控制 ng-hide 或 ng-show 将不起作用
【发布时间】:2015-03-31 15:58:09
【问题描述】:

如果单击 ng-repeat 中的任何按钮,我会尝试隐藏 div。但是它似乎不起作用,它让我想到如果从 ng-repeat 中控制 ng-hide 或 ng-show 是否不起作用?

<div data-ng-hide="showChooseHardware">
    <table class="table">
        <tbody>
            <tr data-ng-repeat="hardware in hardwares">
                <td>{{hardware.name}}</td>
                <td>
                    <button type="button" class="btn" data-ng-click="showChooseHardware=!showChooseHardware"/>
                </td>
            </tr>
        </tbody>
    </table>
</div>

【问题讨论】:

    标签: angularjs ng-repeat ng-show ng-hide


    【解决方案1】:

    ngRepeat 指令在每次迭代中为数组中的每个项目创建新的范围。它可能会产生问题,你有。

    【讨论】:

      【解决方案2】:

      这是因为 ng-repeat 为每个模板创建了一个新范围,以及原型继承在 JavaScript(和 AngularJS)中的工作方式。

      使用一个对象:

      $scope.viewModel = { showChooseHardware: false };
      

      HTML:

      data-ng-hide="viewModel.showChooseHardware"
      

      还有:

      data-ng-click="viewModel.showChooseHardware=!viewModel.showChooseHardware"
      

      可以在here找到关于这个问题的详细解释。

      我建议在这种情况下使用ng-show,因为该变量称为showChooseHardware

      【讨论】:

      • 谢谢,您的解释有效。我使用带有 ng-hide 的 showChooseHardware 的原因是由于调试,我正在尝试 ng-show 和 ng-hide 以查看 ng-show 是否有问题。我现在又回到了 ng-show。现在,我需要阅读引用的链接.. TY!
      • 避免范围继承问题的一种简单有效的方法是使用 controllerAs 语法。 ng-controller="MyController as ctrl" ng-model="ctrl.showChooseHardware"
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2015-06-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-10-18
      • 2014-12-08
      • 2014-03-27
      相关资源
      最近更新 更多