AngularJS Material 1.1.8：如何为<md-option>设置父div？

开发者阿泽

2026-5-22

Hey there! Let's take a look at your AngularJS Material 1.1.8 md-select setup, format the code properly, and cover some useful tips to make it work as expected:

Formatted Implementation Code

<body>
  <div>
    <div id="my-select-div" layout="row" layout-align="space-between center">
      <md-select placeholder="Select Item" class="md-no-underline" md-container-class="my-md-select-dropdown">
        <md-option ng-repeat="item in $ctrl.items" ng-value="item">
          <header>{{ item.name }}</header>
        </md-option>
      </md-select>
    </div>
  </div>
</body>

Key Notes for Smooth Functionality

Initialize your data source properly: Make sure $ctrl.items is populated with valid data in your controller. For example:

// Inside your component/controller
angular.module('yourAppName').controller('YourController', function() {
  this.items = [
    { name: "First Item", id: 1 },
    { name: "Second Item", id: 2 },
    { name: "Third Item", id: 3 }
    // Add more items as needed
  ];
});

Bind a selected value: If you need to track the user's selection, add an ng-model to the md-select element:
```
<md-select 
  placeholder="Select Item" 
  class="md-no-underline" 
  md-container-class="my-md-select-dropdown"
  ng-model="$ctrl.selectedItem"
>
```
This will store the entire selected item object in $ctrl.selectedItem. If you only need a specific property (like the item's ID), adjust ng-value to ng-value="item.id".
Customize dropdown styling: The md-container-class="my-md-select-dropdown" lets you tweak the dropdown's appearance with CSS. Here's a quick example:
```
.my-md-select-dropdown {
  min-width: 250px;
  background-color: #f8f8f8;
  border-radius: 4px;
}
```
Accessibility tip: For better screen reader support, consider adding an aria-label or aria-labelledby attribute to the md-select element.