Focus on a particular row after using ng-repeat

Question

I have a requirement where I have to focus to a particular row when the items are displayed using ng-repeat.
Let us say that I have a list of 100 items with each item having field, itemId ranging from 1 to 100, itemName and isAvailable. This list is fetched from the server using an ajax call from the angularjs service that I wrote. The controller in turn uses this service to make the ajax call. When the response is retrieved, I am displaying this list on the UI using ng-repeat. Eveything is fine so far, but I want to automatically focus to an item which has an itemId value of lets say 50 when the page is loaded. I want to to this from the controller side.
Below is the code that I currently have.

HTML

<div id="eventTypes" class="panel-body">
    <div ng-repeat="item in items" class="panel-body">
        <div class="row">
            <div class="col-md-9">{{item.itemId)}}</div>
            <div class="col-md-9">{{item.itemName)}}</div>
            <div class="col-md-9">{{item.isAvailable)}}</div>
        </div>
    </div>
</div>

JS

(function () {
    'use strict';
    angular.module('myApp').controller('itemsController', function ($scope, itemsService) {

        var serviceError = function (errorMsg) {
            console.log(errorMsg);
        };

        $scope.items = [];

        $scope.loaditems = function () {
            itemsService.getitems().then(function (response) {
                $scope.items = response.data;
            }, serviceError);
        };

        $scope.loaditems();
    });
}());

The above code works fine. It is displaying the items on the UI. But, I want to automatically focus (scroll) to the item number 50 when the page is loaded.

you probably need to use [$anchorScroll](https://docs.angularjs.org/api/ng/service/$anchorScroll#!). — Claies, Nov 02 '16 at 12:44
Well, that was my first choice, But as far as I know, `$anchorScroll` works only with anchor tags and as you can see from the HTML code, I don't use an anchor tag. — RITZ XAVI, Nov 02 '16 at 12:46
@MB, can you elaborate your suggestion ? May be by providing some code snippet. — RITZ XAVI, Nov 02 '16 at 12:47

score 1 · Answer 1 · answered Nov 02 '16 at 12:47

1

Can do Like this: $("#eventTypes").scrollTop(HeightOfItem*(ItemIndex-1))

answered Nov 02 '16 at 12:47

vakho papidze

465
3
12

score 1 · Answer 2 · edited Nov 02 '16 at 14:02

1

myApp.directive('scrollOnLoad', function() {
  return {
    restrict: 'A',
    scope:{itemId: '='}
    link: function(scope) {

      body.on('load', function() {
        var el = $('#'+ scope.itemID);
        $("body").animate({scrollTop: el.offset().top}, "slow");
      });
    }
  }
});

and in your HTML

add an id to each row.
add the directive and set the directive's item-id to the value you want to scroll to

<div id="eventTypes" class="panel-body">
   <div ng-repeat="item in items" class="panel-body" scroll-on-load item-id="50">
       <div class="row" id="{{item.itemId}}">
          <div class="col-md-9">{{item.itemId)}}</div>
          <div class="col-md-9">{{item.itemName)}}</div>
          <div class="col-md-9">{{item.isAvailable)}}</div>
       </div>
   </div>
</div>

edited Nov 02 '16 at 14:02

Heretic Monkey

11,687
7
53
122

answered Nov 02 '16 at 12:57

M B

2,326
24
33

the value of the item to be scrolled to is not static. I just used it as an example. In real scenario, the item to be scrolled to would be dynamic depending on what was chosen on the previous page. – RITZ XAVI Nov 02 '16 at 13:04
so pass a variable to the `item-id`. Note: it would not need the `{{}}` because its just passing it around angular as a variable – M B Nov 02 '16 at 13:12

Nikhil Mohanan · Answer 3 · 2016-11-02T14:27:07.297

// Code goes here

angular
  .module('myApp', [])
  .run(function($rootScope) {
    $rootScope.title = 'myTest Page';
  })
  .controller('testController', ['$scope', function($scope) {

    $scope.items = [];

    for (var i = 0; i < 101; i++) {
      $scope.items.push({
        name: 'nikhil00' + i,
        id: i,
      })
    }

  }]).directive('scrollto', scrollto);
scrollto.$inject = ['$timeout'];
function scrollto($timeout) {
  return {
    scope: {
      scrollto: "=scrollto",
    },
    link: function(scope, element) {
      if (scope.scrollto) {
        $timeout(function() {
          window.scrollTo(0, element[0].offsetTop);
        })

      }
    }
  }
};

<!DOCTYPE html>
<html data-ng-app="myApp">

  <head>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body data-ng-controller="testController">

    <div ng-repeat="item in items">
      <label ng-bind="item.name" scrollto="$last"></label> 
    </div>
  </body>
</html>

$last will be true for the last element in ng-repeat.So we are applying a directive there to get that last element and scroll into it.Hope it helps.

Please add some explanation of why this code helps the OP. This will help provide an answer future viewers can learn from. See [answer] for more information. — Heretic Monkey, Nov 02 '16 at 14:01

score 1 · Answer 4 · edited Nov 02 '16 at 14:01

1

Looking through your comments and question, is it possible for you add a class while you are choosing in your previous page. Then when you come to next page, in your controller you can do something like this:

angular.element('className').focus();

edited Nov 02 '16 at 14:01

Heretic Monkey

11,687
7
53
122

answered Nov 02 '16 at 13:45

Thalaivar

23,282
5
60
71

Focus on a particular row after using ng-repeat

4 Answers4