如何在MD-Sidenav中预选第一项

Question

我试图在加载HTML时试图将MD-Sidenav中的第一项预选。所以我不必按第一个按钮。有人已经实现了吗？

 <md-sidenav flex md-is-locked-open="$mdMedia('gt-sm')" md-component-id="left"
            class="sidenav md-whiteframe-z2 md-sidenav-left">
    <md-button ng-repeat-start="item in menuItems" layout="column" layout-align="center center"
               flex class="capitalize" ng-click="selectItem(item)"
               ui-sref="{{item.sref}}">
        <div class="md-tile-content">
            {{item.name}}
        </div>
    </md-button>
    <md-divider ng-repeat-end></md-divider>
</md-sidenav>

控制器按以下方式定义：

    menuItems = [
    {
        name: 'personA',
        icon: 'person',
        sref: '.personA'
    },
    {
        name: 'personB',
        icon: 'person',
        sref: '.personB'
    },
    {
        name: 'personC',
        icon: 'person',
        sref: '.personC'
    }
];
function toggleItemsList() {
    $mdSidenav('left').toggle();
}
function selectItem (item) {
    self.title = item.name;
    self.toggleItemsList();
}

Answer 1

您可以使用ng-init和$first实现这一目标。请看一下这个演示小提琴。

<md-button ng-repeat-start="item in menuItems" 
           layout="column"  
           layout-align="center center"
           flex class="capitalize" 
           ng-click="selectItem(item)"
           ng-init="autoSelect($first, item)"
           ui-sref="{{item.sref}}">
  <div class="md-tile-content">
    {{item.name}}
  </div>
</md-button>

范围函数

$scope.autoSelect = function(first, item) {
  if (first) {
    self.title = item.name;
    self.toggleItemsList();
  }
};