使用ng repeat后，将注意力集中在特定的一行上

Focus on a particular row after using ng-repeat

本文关键字：一行 repeat ng 集中 注意力 使用      更新时间：2023-09-26

我有一个要求，当使用ng repeat显示项目时，我必须关注特定的行
假设我有一个100个项目的列表，每个项目都有字段，itemId从1到100，itemName和isAvailable。这个列表是使用我编写的angularjs服务的ajax调用从服务器获取的。控制器反过来使用此服务进行ajax调用。当检索到响应时，我将使用ng repeat在UI上显示此列表。到目前为止一切都很好，但我想在加载页面时自动关注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。

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

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

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

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 中

  1. 向每一行添加一个id
  2. 添加指令并将指令的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>


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

对于ng-repeat中的最后一个元素，$last将为true。因此，我们正在那里应用一个指令来获取最后一个图元并滚动到其中。希望它能有所帮助。

相关文章：