如何定位AngularJS Material Select下拉列表?

是的,这是默认行为。如果您想更改下拉列表的位置,那么必须使用jquery来处理它,以更改其CSS属性。还必须注意dom操作在Material design js执行之后执行。因此,通过查找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="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>

$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