如何定位 AngularJS 材质选择的下拉菜单？

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>

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

现在尝试单击“贡献 2”并取消选择“所有贡献类型”，然后单击下拉菜单，然后再次单击选择菜单。正如你所注意到的，这就是你得到的

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

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

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

Answer 1

是的，这是默认行为。如果你想改变下拉菜单的位置，那么你必须使用 jquery 来改变它的 CSS 属性。并且还必须注意您的 dom 操作在 Material design js 之后执行。因此，通过找到 md-select 元素的偏移顶部并减去大约。选择的高度（这里是 20px）你会得到你的下拉列表的 css 顶部，你可以给它选择它的类，它通过属性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="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);

};

这里的超时时间应该取决于在您的项目中实现材料设计动画的速度以及执行 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 链接：http://plnkr.co/edit/DjFiWJD1FPFzEK0v7siG?p=preview