1

I am working on an app that submits the form and get the result from the server which followed by HTML table view. My input form is a bit big which covers whole the screen. When the table comes then I want automatically scroll down at the table view. I used $anchorScroll from angularJs. But I am not able to achieve the result what I want. I also used $timeout to make sure the table is already exist or not and then perform $anchorScroll, but still no success. (based on this solution : Using $location and $anchorScroll to scroll a table row into view

Hear is my code.

HTML

<div data-ng-controller="searchController as searchCtrl" id="scrollArea">
    <form>
       //HTML input elements

       <div class="buttons">
           <md-button class="md-primary md-raised" ng-click="searchCtrl.gotoTable('resultTable')">Start</md-button>
       </div>
    </form>
</div>

<!-- Smart Table for displaying result -->
<div class="rtable" ng-show = "searchCtrl.tableViewData.length > 0" id="resultTable">

//table content

</div>

Controller

angular.module('myApp')

.controller("searchController", function($log, searchService, $scope, $location, $anchorScroll, $timeout){
    var self = this;

 self.gotoTable = function(resultTable) 
    {
        $timeout(function() {
            $location.hash(resultTable);
            $anchorScroll();
        });
    };

});

I dont know why its not working?

Do i need to define the id scrollArea and resultTable in my CSS?

Any help would be appreciated. Thanks in advance.

UPDATE

Based on Okazari's solution, I tried to put a another div with many br tag above at the very bottom of my HTML. Now When I refresh the page then it automatically scroll to that div tag without clicking Start. this is a bit weird. I also tried to cover the 

 <div class="rtable" ng-show = "searchCtrl.tableViewData.length > 0" id="resultTable">

tag with another div tag with id = "resultTable". But still it did not work.

Community
  • 1
  • 1
Harsh Soni
  • 41
  • 1
  • 4
  • 12

1 Answers1

4

You actually are invoking your function without any parameters

ng-click="searchCtrl.gotoTable()"

whereas in your controller you expect to have one :

self.gotoTable = function(resultTable)

Try something like this 

ng-click="searchCtrl.gotoTable('resultTable')"

or this :

self.gotoTable = function() 
{
    $timeout(function() {
        $location.hash("resultTable");
        $anchorScroll();
    });
};

(just one, not both)

Hope it helped.

EDIT : Pretty sure that you can't go to a hidden div. As i said in comment your ng-show may be evaluated to true when you try to anchorscroll().

Here is a working plunker without ng-show. I'll build a tiny solution to avoid the ng-show issue.

To avoid this side effect, i wrapped the div with ng-show with another div.

<div id="resultTable">
 <div class="rtable" ng-show = "searchCtrl.tableViewData.length > 0">
</div>
Okazari
  • 4,597
  • 1
  • 15
  • 27
  • yeah, i tried the both option one by one. But it still not working...:( – Harsh Soni Sep 04 '15 at 13:00
  • @HarshSoni I think i have an idea of the issue. You actually can't anchor scroll to an hidden div. Till you have a ng-show on the div you want to scroll to. The ng-show may be evaluated to true when the anchor-scroll trigger – Okazari Sep 04 '15 at 13:17
  • Hey, I tried the same with covering the div tag with id, but still its not working. And i have updated the question. Please go through it. thanks. – Harsh Soni Sep 04 '15 at 13:52
  • **Not really helpful.** I have injected $anchorScroll in controller. **HTML : ** **Controller :** $scope.testFunc = function(){ $anchorScroll(); } I'm using this md-calendar directive. – rahim.nagori Feb 25 '19 at 09:33