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

Answer 2

将href="#"替换为href=""。它应该工作。

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

2 个答案: