Question

我有一个要求，当使用ng-repeat显示项目时，我必须将焦点集中到特定行我们假设我有一个包含100个项目的列表，每个项目都有字段itemId，范围从1到100，itemName和isAvailable。使用我编写的angularjs服务的ajax调用从服务器获取此列表。控制器依次使用此服务进行ajax调用。检索到响应后，我将使用ng-repeat在UI上显示此列表。到目前为止Eveything很好，但我想自动关注一个项目，当加载页面时，该项目的itemId值为50。我想从控制器方面来看这个以下是我目前的代码。

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

上面的代码工作正常。它正在UI上显示项目。但是，我想在页面加载时自动对焦（滚动）到项目编号50.

Answer 1

可以这样做：$("#eventTypes").scrollTop(HeightOfItem*(ItemIndex-1))

Answer 2

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>

Answer 3

＆＃13;

// 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);
        })

      }
    }
  }
};

＆＃13;

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

＆＃13;

$last对于ng-repeat中的最后一个元素都是正确的。所以我们在那里应用一个指令来获取最后一个元素并滚动到它。希望它有所帮助。

Answer 4

通过查看您的评论和问题，您可以在上一页选择时添加课程。然后，当你进入下一页时，在你的控制器中你可以做这样的事情：

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

使用ng-repeat后，请关注特定行

4 个答案: