2017-10-12 44 views
2
頁下面

的頂部是我的HTML表有角的js原因排序跳上

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

和角的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

+0

因爲'href =「#」'你可以用'href =「」' –

回答

0

更換href="#"href=""。它應該工作。