更新时间:2022-10-28 15:27:33
这是因为 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-show
instead in this case since the variable is called showChooseHardware
.