ng-hide или ng-show не работает, если его управляют изнутри ng-repeat

Question

Я пытаюсь скрыть div, если нажата какая-либо из кнопок в ng-repeat. Однако, похоже, что это не работает, это заставляет меня думать, что если ng-hide или ng-show не будут работать, если они будут контролироваться из 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> 

Answer 1

Это связано с тем, что нг-повторение создает новые возможности для каждого шаблона и из-за того, как прототипичный работает наследование в JavaScript (и AngularJS).

Использование объекта:

$scope.viewModel = { showChooseHardware: false }; 

HTML:

data-ng-hide="viewModel.showChooseHardware" 

И:

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

Большое объяснение по этому вопросу, можно найти here.

Вместо этого в этом случае я рекомендую использовать ng-show, так как переменная называется showChooseHardware.

Answer 2

Директива ngRepeat создает новую область действия на каждой итерации для каждого элемента массива. Это может создать проблему, которая у вас есть.