使用ng-重复之后，将注意力集中在特定行上。
使用ng-重复之后，将注意力集中在特定行上。
提问于 2016-11-02 12:42:10
我有一个要求，当使用ng-重复显示项目时，我必须聚焦到特定的行。
让我们说，我有一个包含100个项目的列表，每个项目都有字段，itemId范围从1到100，itemName和isAvailable。这个列表是使用我编写的angularjs服务的ajax调用从服务器获取的。控制器则使用此服务进行ajax调用。当检索响应时，我使用ng-重复在UI上显示这个列表。到目前为止，每件事情都很好，但我想自动聚焦到一个项目，它的itemId值为50，当页面加载时。我想从控制员的角度谈这个。
下面是我目前的代码。
<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。
回答 4
Stack Overflow用户
发布于 2016-11-02 12:47:48
可以这样做：$("#eventTypes").scrollTop(HeightOfItem*(ItemIndex-1))
Stack Overflow用户
发布于 2016-11-02 12:57:27
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>Stack Overflow用户
发布于 2016-11-02 13:38:48
// 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.So中的最后一个元素是正确的，我们将在那里应用一个指令来获取最后一个元素并滚动到it.Hope中，这很有帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40380240
复制相关文章
相似问题
腾讯云开发者
