使用 Angular Js 排序导致跳转到页面顶部

Question

下面是我的 HTML 表格

<table class="table table-bordered table-condensed table-sm ">
    <thead class="thead-inverse">
        <tr>
            <th>#</th>
            <th>
                <a href="#" ng-click="sortType ='Product';sortReverse =!sortReverse">Product</a>
                <span ng-show="sortType == 'Product' && !sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="sortType == 'Product' && sortReverse" class="fa fa-caret-up"></span>
            </th>
            <th>
                <a href="#" ng-click="sortType = 'Location';sortReverse =!sortReverse">Location</a>
                <span ng-show="sortType == 'Location' && !sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="sortType == 'Location' && sortReverse" class="fa fa-caret-up"></span>
            </th>
            <th>
                <a href="#" ng-click="sortType = 'Qty';sortReverse =!sortReverse">Qty.</a>
                <span ng-show="sortType == 'Qty' && !sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="sortType == 'Qty' && sortReverse" class="fa fa-caret-up"></span>
            </th>
            <th>
                <a href="#" ng-click="sortType = 'UnitPrice';sortReverse =!sortReverse">UnitPrice</a>
                <span ng-show="sortType == 'UnitPrice' && !sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="sortType == 'UnitPrice' && sortReverse" class="fa fa-caret-up"></span>
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="x in ProductInfo | orderBy :sortType:sortReverse | filter:searchText" ng-class="$even?'table-danger':'table-info'">
            <td>{{$index+1}}</td>
            <td>{{x.Product}}</td>
            <td>{{x.Location}}</td>
            <td>{{x.Qty}}</td>
            <td>{{x.UnitPrice | currency : '&#x20B9;':2}}</td>
            <td class="text-center"><i class="fa fa-flag" aria-hidden="true" style="color:red"></td>
        </tr>
    </tbody>
</table>

而 Angular Js 代码是

$scope.ProductInfo=[
    {Product:"CRX-MB100",Location:"Org-W40",Qty:"200",UnitPrice:"1000"},

    {Product:"MVP-Q100",Location:"Org-D800",Qty:"500",UnitPrice:"2500"},

    {Product:"EMP-QX100Z",Location:"Org-US09",Qty:"400",UnitPrice:"1800"},

    {Product:"RT23-QXP888M",Location:"Org-Dist09",Qty:"100",UnitPrice:"2500"},

    {Product:"ZyF-AMD300",Location:"Org-W50",Qty:"200",UnitPrice:"1200"},
    ]

    $scope.sortType     = 'Product'; // set the default sort type
    $scope.sortReverse  = false;  // set the default sort order
    $scope.searchText   = '';     // set the default search/filter 

效果很好，点击表格标题对表格进行排序，但也会跳转到页面顶部，这是有问题的，因为必须再次向下滚动到表格才能查看结果数据，单页应用程序不应该闪烁（特别是使用 Angular js喜欢英雄平台）。

我为这种行为搜索了很多，但没有得到任何东西，知道这种行为并防止它是很重要的。

代码引用自https://scotch.io/tutorials/sort-and-filter-a-table-using-angular

Answer 1

因为href="#"你可以用href=""替换它

在此处显示代码： https://codepen.io/anon/pen/NaBxZm