如果 ng-hide 或 ng-show 是从 ng-repeat 中控制的，则它不起作用 [英] ng-hide or ng-show does not work if its controlled from within a ng-repeat

问题描述

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

<table class="table"><tr data-ng-repeat="硬件中的硬件"><td>{{hardware.name}}</td><td><button type="button" class="btn" data-ng-click="showChooseHardware=!showChooseHardware"/></td></tr></tbody>

解决方案

这是因为 ng-repeat 为每个模板创建了一个新的作用域，以及原型继承在 JavaScript(和 AngularJS)中的工作原理.

>

使用对象:

$scope.viewModel = { showChooseHardware: false };

HTML:

data-ng-hide="viewModel.showChooseHardware"

还有:

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

可以在此处找到有关该问题的出色解释.

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

I am trying to hide the div if any of the buttons in the ng-repeat is clicked. However it doesn't seem to work, it leads me to think if ng-hide or ng-show won't work if it is controlled from within a ng-repeat?

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

解决方案

This is due to the fact that ng-repeat creates a new scope for each template and due to how prototypal inheritance works in JavaScript (and AngularJS).

Use an object:

$scope.viewModel = { showChooseHardware: false };

HTML:

data-ng-hide="viewModel.showChooseHardware"

And:

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

A great explanation on the issue can be found here.

I recommend using ng-showinstead in this case since the variable is called showChooseHardware.

这篇关于如果 ng-hide 或 ng-show 是从 ng-repeat 中控制的，则它不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！