如何定位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>

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

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

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

我的问题是，无论我先选择什么，我如何始终将下拉列表放在选择的正下方？我还是AngularJS的新手。谢谢！

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

Answer 1

是的，这是默认行为。如果要更改下拉列表的位置，则需要使用jquery来更改其CSS属性。并且还必须注意你的dom操作在Material design js之后执行。因此，通过找到md-select元素的偏移顶部＆amp;减去约。 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