jQuery Question

Angular. ngAnimate. Animate the block in which it is itself

I have ng-repeat, and in each line there is a button (Info) that should hide the whole table (tableSpeVis). The problem is that the button does not react in any way if it is inside the block that calls

If I place the button somewhere above then the table disappears but in this case it does not disappear

Picture

HTML:

<div class="row">
<div id="showNote">
<div data-ng-show="tableSpeVis">
<table class="table table-striped table-hover">
<thead>
<tr>
<th data-ng-click="sort('spename')">Специальность
<span class="glyphicon sort-icon" data-ng-show="sortKey=='spename'" data-ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th data-ng-click="sort('specode')">Код
<span class="glyphicon sort-icon" data-ng-show="sortKey=='specode'" data-ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th data-ng-click="sort('edulevel')">Уровень подготовки
<span class="glyphicon sort-icon" data-ng-show="sortKey=='edulevel'" data-ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th data-ng-click="sort('ugsn')">УГСН
<span class="glyphicon sort-icon" data-ng-show="sortKey=='ugsn'" data-ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th data-ng-click="sort('edulist')">Перечень
<span class="glyphicon sort-icon" data-ng-show="sortKey=='edulist'" data-ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th data-ng-click="sort('edulist')">

</th>
</tr>
</thead>
<tbody>
<tr data-dir-paginate="item in items |orderBy:sortKey:reverse|itemsPerPage:10">
<td>{{item.spename.value}}</td>
<td>{{item.specode.value}}</td>
<td>{{item.edulevel.value}}</td>
<td>{{item.ugsn.value}}</td>
<td>{{item.edulist.value}}</td>
<td>
<!--------- This button does not work ----------->
<a class="btn btn-primary" href="#" data-ng-click="tableSpeVis = false" data-ng-class="{ active: tableSpeVis }">Info</a>
</td>
</tr>
<dir-pagination-controls
max-size="10"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
</tbody>
</table>
</div>
</div>
</div>


Thank you

Answer Source

You should make a function to show/hide a table inside ng-repeat...

HTML

<td>
   <a class="btn btn-primary" role="button" ng-click="hideTable()">Info</a>
</td>

CONTROLLER

function myController($scope){
    $scope.tableSpeVis = true;

    $scope.hideTable() {
        $scope.tableSpeVis = false;
    }
}

I've done a jsFiddle with a full example of your problem...