我有以下角度代码,显示包含用户内容的列表。
<md-list flex>
<md-list-item class="md-3-line" data-ng-class="{'item-selected-background': item.id === selectedItem.id}"
aria-label="Item" ng-click="onClickItem(item, $event)" ng-repeat="item in itemList">
<h5>Name: {{item.name}}</h5>
<h6>Address: {{item.address}}</h6>
<h6>City: {{item.city}}</h6>
</md-list-item>
</md-list>
此列表很大,有数百个项目。如果 selectedItem 在控制器中发生更改,则该md-list-item应突出显示,列表应自动滚动到UI中的该项目。
我找不到解决方法。任何帮助表示赞赏。感谢。
答案 0 :(得分:2)
我建议您使用angular-scroll。
要管理滚动,您需要测量md-list
的容器高度。在我的情况下,我会将div
与ng-repeat
您可以编写指令,找到要滚动到的项目:
app.directive('scrollToNoteIf', ['$timeout',function ($timeout) {
var getScrollingParent = function(element, _parent) {
var container = _parent;
var container = angular.element(document.getElementById(container));
var section2 = angular.element(document.getElementById(element.id));
if(!container || !section2){
return;
}
$timeout(function () {
container.scrollTo(section2, 40, 0);
}, 200);
};
return function (scope, element, attrs) {
scope.$watch(attrs.scrollToNoteIf, function(value) {
if (value) {
getScrollingParent(element[0], attrs.scrollToNoteIdContainer);
}
});
};
}]);
所以用法如下:
<md-content>
<div id="some-container-id">
<div ng-repeat="obj in vm.activity.objectives"
id="id_{{obj.id}}"
scroll-to-note-if="obj.id === $root.selected_id"
scroll-to-note-id-container="some-container-id">
<wm-item objective="obj">
</wm-item>
</div>
</div>
</md-content>
通过用您自己的obj.id === $root.selected_id
替换,您可以滚动到任何您想要的项目
我认为这个例子可以帮助你解决问题。