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来实现这一目标。请查看此demo fiddle。

<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();
  }
};

如何在md-sidenav中预选第一项

1 个答案:

范围功能