Angular 材质：md-select 未显示 selected 选项

Question

我正在使用 AngularJS 和角材质开发一个应用程序。

在我的模板中：

<md-input-container>
  <label>{{::"Users" | translate }}</label>
  <md-select md-container-class="default-select"
             ng-model="$ctrl.filter.user"
             ng-change="$ctrl.filterPostsByUser()">
    <md-option ng-value="user"
               ng-repeat="user in $ctrl.UsersService.config.users"
               ng-selected="{{user.UserName == $ctrl.filter.currentUser.userName ? 'selected' : ''}}">
      {{ user.userName }}
    </md-option>
  </md-select>
</md-input-container>

在脚本 (JavaScript) 文件中：

filterPostsByUser() {
 if (this.filter.user) {
  this.userID = this.filter.user.id;
 }
}

如果我检查 md-select 元素，我可以看到当前用户名（比方说 "John Doe"）选项有 ng-selected="selected"，但在视觉上，md-select 没有't 显示 "John Doe"，但通用的默认占位符 "Users".

少了什么？

Answer 1

也许，下面的代码可以帮到你

class AppController {
  constructor($q) {
    this.deferred = $q.defer();
    this.userService = {
      users: [{
          userName: 'John Dow'
        },
        {
          userName: 'Marry Poppins'
        },
        {
          userName: 'Harry Potter'
        }
      ],
    };
    this.filter = {
      user: this.userService.users[0]
    }
  }
}

AppController.$inject = ['$q'];

angular.module('app', ['ngMaterial', 'ngMessages'])
  .controller('appController', AppController);

angular.bootstrap(document.querySelector('#root'), ['app']);

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.min.css">
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-messages.min.js"></script>

<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.min.js"></script>

<div id="root" ng-controller="appController as appController">

  <md-input-container>
    <label>Users</label>
    <md-select md-container-class="default-select" ng-model="appController.filter.user" ng-change="$ctrl.filterPostsByUser()">
      <md-option ng-value="user" ng-repeat="user in appController.userService.users">{{ user.userName }}</md-option>
    </md-select>
  </md-input-container>


</div>

Angular 材质：md-select 未显示 selected 选项

Angular Material: md-select not showing selected option

angularjs

ecmascript-6

angularjs-material