角。 ngAnimate。为它本身的块设置动画

时间:2017-03-11 15:41:32

标签: javascript jquery angularjs angularjs-ng-repeat

我有ng-repeat,并且在每一行中都有一个按钮(Info),它应该隐藏整个表格(tableSpeVis)。问题是如果按钮位于调用

的块内,则按钮不会以任何方式作出反应

如果我将按钮放在上方某处,则表格会消失,但在这种情况下它不会消失

Picture

HTML:

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

谢谢

1 个答案:

答案 0 :(得分:0)

你应该创建一个函数来显示/隐藏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;
    }
}

我已经完成了jsFiddle并提供了完整的问题示例......