All geek questions in one place

Focus on a specific line after using ng-repeat

I have a requirement when I need to focus on a specific line when items are displayed using ng-repeat.
Let's say I have a list of 100 elements with each element having a field, itemIdfrom 1 to 100, itemNameand isAvailable. This list is retrieved from the server using an ajax call from the angularjs service I wrote. The controller, in turn, uses this service to call ajax. When the response is received, I display this list in the user interface using ng-repeat. So far so good, but I want to automatically focus on the element that matters itemId, which allows you to say 50 when the page loads. I want this from the controller side.
Below is the code that I 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();
    });
}());

. . () 50 .

+4
4

: $("#eventTypes").scrollTop(HeightOfItem*(ItemIndex-1))

+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");
      });
    }
  }
});

HTML

  • id .
  • item-id ,
<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>
+1

// 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 ng-repeat. . , .

+1

Looking through your comments and the question, is it possible to add a class when you select on your previous page. Then, when you go to the next page, in your controller you can do something like this:

angular.element('className').focus();
+1
source

Source: https://habr.com/ru/post/1659605/

More articles:


All Articles