NG-隐藏或NG-显示如果从纳克重复控制在不工作 [英] ng-hide or ng-show does not work if its controlled from within a ng-repeat

问题描述

我试图隐藏分区（如果有）在NG-重复按钮被点击。然而，它似乎并没有工作，这使我想到，如果，如​​果它是从内部控制的NG-隐藏或NG-节目将无法正常工作一个NG-重复？

 ＆LT; D​​IV数据-NG-隐藏=showChooseHardware＆GT;
    ＆LT;表类=表＆GT;
        ＆LT;＆TBODY GT;
            ＆LT; TR数据-NG-重复=硬件硬件＆GT;
                ＆所述; TD＆GT; {{hardware.name}}＆下; / TD＆GT;
                ＆所述; TD＆GT;
                    ＆LT;按钮式=按钮级=BTN数据-NG-点击=showChooseHardware = showChooseHardware！/＆GT;
                ＆LT; / TD＆GT;
            ＆LT; / TR＆GT;
        ＆LT; / TBODY＆GT;
    ＆LT; /表＆gt;
＆LT; / DIV＆GT;
 

解决方案

这是由于如何原型继承中的JavaScript（和AngularJS）的作品是由于NG-重复创建为每个模板和一个新的作用域的事实。

使用对象：

  $ scope.viewModel = {showChooseHardware：假};
 

HTML

 数据-NG-隐藏=viewModel.showChooseHardware
 

和

 数据-NG-点击=viewModel.showChooseHardware =！viewModel.showChooseHardware
 

在这个问题很好的解释可以发现这里。

的我建议使用 NG-节目，而不是在这种情况下，因为变量称为 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-隐藏或NG-显示如果从纳克重复控制在不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！