CODEWITHSUNDEEP
javascripthtmlangularjs
RITZ XAVI
RITZ XAVI

Reputation: 3799

Focus on a particular row after using ng-repeat

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.

Upvotes: 4

Views: 1281

Answers (4)

Nikhil Mohanan
Nikhil Mohanan

Reputation: 1260

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

Upvotes: 1

M B
M B

Reputation: 2326

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

  1. add an id to each row.
  2. 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>

Upvotes: 1

Thalaivar
Thalaivar

Reputation: 23642

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();

Upvotes: 1

vakho papidze
vakho papidze

Reputation: 465

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

Upvotes: 1

Related Questions