Question

How can I make selected item in listbox scroll to the top?

有些事情对此很熟悉，但有一些变化： 1）仅使用角度，不使用jq。 2）我的代码不同。

<span class="custom-list-wrapper" ng-show="openDropDown"> 
    <span class="custom-list">
        <span class="list-object ng-binding ng-scope selected" ng-repeat="(key, value) in countries " data-value="AUT" ng-click="changeCountry({data: value.name})" ng-class="{selected : selected.name == value.name}">
                Austria
         </span>

这就是我的看法：

<span class="custom-list-wrapper" ng-show="openDropDown"> 
    <span class="custom-list" >
         <span class="list-object" ng-repeat="(key, value) in countries " data-value="{{key}}"  ng-class="{selected : selected.name == value.name}">
                {{value.name}}
         </span>
    </span>
</span>

这是一个非常长的列表，我想滚动到下拉列表中的特定项目，有些事情就像在小提琴中

    /*  var scrollToSelected = function(){
    //  angular.element('.custom-list').animate({scrollTop : angular.element(xxx)},1000);

    angular.element('.custom-list').animate({
        scrollTop: angular.element('span[value="AUT"]').offset().top
    }, 1000);

}

我试过这个但是得到了一个jqlite错误。

很高兴听到任何解决方案：）

Answer 1

由于您没有使用JQuery，因此您应该了解jQLite的工作原理。 jQLite的工作方式是，它只能查询预定义的tagName＆amp; HTML的element。适用于custom-class＆amp;基于selector的查询您必须使用native-browser API来获取DOM。

var customList = document.getElementsByClassName('custom-list'),
    spanAut    = document.querySelector('span[value="AUT"]');
angular.element(customList).animate({
    scrollTop: angular.element(spanAut).prop('offsetTop')
}, 1000);

Angularjs自定义下拉列表滚动到值

1 个答案: