滚动到angularjs中md-list中的md-list-item

时间:2017-07-13 09:04:59

标签: angularjs angular-material

我有以下角度代码,显示包含用户内容的列表。

<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中的该项目。

我找不到解决方法。任何帮助表示赞赏。感谢。

1 个答案:

答案 0 :(得分:2)

我建议您使用angular-scroll。 要管理滚动,您需要测量md-list的容器高度。在我的情况下,我会将divng-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替换,您可以滚动到任何您想要的项目

我认为这个例子可以帮助你解决问题。