如何定位 AngularJS Material Select 的下拉菜单？

Question

尝试运行我在 plunker 中制作的代码 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>

如您所见，这就是您单击 select 菜单时看到的内容

现在尝试点击 "Contribution 2" 和 deselect "All Contribution Types" 然后点击下拉菜单，然后再次点击 select 菜单。如您所见，这就是您得到的结果

下拉列表的位置移动了。我认为这是默认行为，所以我想更改它。

我的问题是，无论我先 select 编辑了什么，我如何始终将下拉菜单放置在 select 正下方，就像第一个屏幕截图一样？我还是 AngularJS 的新手。谢谢！

编辑：我未被允许使用jQuery或任何其他库。我只限于AngularJS

Answer 1

是的，这是默认行为。如果你想改变下拉菜单的位置，那么你必须使用 jquery 来改变它的 CSS 属性。并且还必须注意您的 dom 操作在 Material design js 执行之后执行。因此，通过找到 md-select 元素的偏移顶部并减去大约。 select 的高度（此处为 20px），您将获得 css 顶部的下拉菜单，您可以将其设置为 selecting 其 class 属性 [=13] =] 所以你的代码应该是这样的：

<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()函数会进行位置变化即：

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

};

此处超时应取决于 material 设计的动画在您的项目中实现的速度以及执行 md js 函数所需的最短时间。这是你的 plunker 的更新版本：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);

};

这是工作中的 plunker link：http://plnkr.co/edit/DjFiWJD1FPFzEK0v7siG?p=preview

如何定位 AngularJS Material Select 的下拉菜单？

How do I position the drop down of AngularJS Material Select?

angularjs

angularjs-material