当表变得可见时,在第一行显示

时间:2017-03-17 02:21:55

标签: angularjs

In this plunk这里有一个带有两个按钮显示/隐藏的表格。如果将表格滚动到底行,然后单击“隐藏”,然后再次单击“显示”,表格仍将显示底线。我需要在任何时候单击“显示”按钮,表格应显示顶部的第一行。这可行吗?

HMTL

<div style="width:300px;height:80px;border:1px solid gray;overflow-y:auto"
    ng-show="show">
     <table>
        <tr ng-repeat="item in items">
            <td>{{item.col}}</td>
        </tr>
     </table>
 </div>
 <br>        
 <button ng-click="show=false">Hide</button>
 <button ng-click="show=true">Show</button>

的Javascript

var app = angular.module('app', []);

app.controller('ctl', function($scope) {

    $scope.items = [ {col:"aaa"}, {col:"bbb"} , {col:"ccc"}, 
                     {col:"aaa2"}, {col:"bbb2"} , {col:"ccc2"}, 
                     {col:"aaa2"}, {col:"bbb2"} , {col:"ccc2"} ];
    $scope.show = true;

});

1 个答案:

答案 0 :(得分:2)

如果您将ng-show更改为ng-if,则会重新创建表格,而不是更改可见性,以便滚动显示在顶部。

Plunker