如何定位AngularJS Material Select的下拉列表? [英] How do I position the drop down of AngularJS Material Select?

问题描述

尝试在此处运行我在plunker中编写的代码

现在尝试单击贡献2"，然后取消选择所有贡献类型"，然后从下拉列表中单击，然后再次在选择菜单上单击.如您所见，这就是您得到的

下拉菜单的位置已移动.我认为这是默认行为，所以我想更改它.

我的问题是，无论我首先选择了什么，如何始终将下拉列表始终定位在选择项的正下方，就像第一个屏幕截图一样?我还是AngularJS的新手.谢谢！

不允许允许我使用jQuery或任何其他库.我只限于AngularJS

解决方案

是的，这是默认行为.如果要更改下拉菜单的位置，则必须使用jquery更改其CSS属性来处理它.并且还必须注意，在Material design js之后执行dom操作.因此，通过查找md-select元素的偏移量顶部&减去约选择高度(此处为20px)，您将获得下拉菜单的css top，您可以通过选择 md-container-class ="my-container" 使其可用的类来获得它的顶部.代码应如下所示:

 < div layout ="row">< div class ="select" ng-click ="selclicked()">< md-input-container>< md-select md-container-class ="my-container" ng-model ="selected"md-selected-text ="displaySelected()" Multiple class ="my-md-select">< md-optgroup>< md-option ng-value ="data.label" ng-repeat =数据中的数据"ng-click ="clicked(datas，data)" ng-selected ="data.selected"> {{data.label}}</md-option></md-optgroup></md-select></md-input-container></div></div> 

selclicked()函数将执行以下位置更改:

  $ scope.selclicked = function(){var containerTop = $(.my-md-select").offset().top-20 +"px";setTimeout(function(){$(.my-container").css({'top':containerTop});}，50);}; 

此处的超时时间应取决于在您的项目中实现的用于材料设计的动画有多快&执行md js函数所需的最短时间.这是您的监听器的更新版本: http://plnkr.co/edit/4FSWeAC4Ae4iWfWSCzvG?p=preview

更新:

如果您只能使用JavaScript，则可以使用 Element.getBoundingClientRect()来实现查找那些元素的偏移量的相同操作.它对所有浏览器均提供基本支持.因此，您的函数可能看起来如下:

  $ scope.selclicked = function(){var bodyRect = document.body.getBoundingClientRect();var myElement = document.getElementsByClassName('sel');var containerTop = myElement [0] .getBoundingClientRect().top-bodyRect.top +'px';var myContainer = document.getElementsByClassName('my-container');setTimeout(function(){angular.element(myContainer).css({'top':containerTop});}，50);}; 

这里有工作的监听器链接: http://plnkr.co/edit/DjFiWJD1FPFzEK0v7siG?p=预览

Try running the code I made in plunker here http://plnkr.co/bvysoi

<div ng-controller="dropdownController" class="md-padding" ng-cloak>
  <div layout="row">
    <md-input-container>
      <md-select md-container-class="my-container" ng-model="selected" md-selected-text="displaySelected()" multiple>
        <md-optgroup>
          <md-option ng-value="data.label" ng-repeat="data in datas" ng-click="clicked(datas, data)" ng-selected="data.selected">{{data.label}}</md-option>
        </md-optgroup>
      </md-select>
    </md-input-container>
  </div>
</div>

As you can see, this is what you see when you click on the select menu

Now try clicking on "Contribution 2" and deselect "All Contribution Types" then click out of the drop down then click again on the select menu. As you noticed, this is what you get

The position of the drop down moved. I think this is the default behavior so I wanted to change this.

My question is how do I always position the drop down just below the select exactly just like the 1st screenshot no matter what I've selected first? I'm still new to AngularJS. Thanks!

EDIT: I'm not allowed to use jQuery or any other libraries. I'm only limited to AngularJS

解决方案

Yeah it's the default behaviour. If you want to change the dropdown's position then you've to handle it using jquery to change its CSS property. And also have to take care that your dom manipulation executes after Material design js does. So by finding offset top of md-select element & subtracting approx. height of select (here 20px) you'll get css top for your dropdown which you can give it be selecting its class which made available by attribute md-container-class="my-container" So your code shall look like:

<div layout="row">
  <div class="select" ng-click="selclicked()">
    <md-input-container>
      <md-select md-container-class="my-container" ng-model="selected" 
        md-selected-text="displaySelected()" multiple class="my-md-select">
        <md-optgroup>
          <md-option ng-value="data.label" ng-repeat="data in datas" 
           ng-click="clicked(datas, data)" ng-selected="data.selected">{{data.label}}
          </md-option>
        </md-optgroup>
      </md-select>
    </md-input-container>
  </div>
</div>

selclicked() function will carry out position change which is:

$scope.selclicked = function(){
    var containerTop = $(".my-md-select").offset().top - 20 + "px";
    setTimeout(function(){
        $(".my-container").css({'top':containerTop});
    }, 50);

};

Here timeout should depend on how fast animations for material design implemented in your project & minimal time required to execute md js functions. Here's updated version of your plunker: http://plnkr.co/edit/4FSWeAC4Ae4iWfWSCzvG?p=preview

Update:

If you've restriction to use only javascript then you can achieve same thing of finding offset of those elements using Element.getBoundingClientRect() It has basic support for all the browsers. So your function might look:

$scope.selclicked = function(){
    var bodyRect = document.body.getBoundingClientRect();
    var myElement  = document.getElementsByClassName('sel');
    var containerTop = myElement[0].getBoundingClientRect().top - bodyRect.top + 'px';
    var myContainer = document.getElementsByClassName('my-container');
    setTimeout(function(){
        angular.element(myContainer).css({'top':containerTop});
    }, 50);

};

Here's working plunker link: http://plnkr.co/edit/DjFiWJD1FPFzEK0v7siG?p=preview

这篇关于如何定位AngularJS Material Select的下拉列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！