[英]Angular Material: md-select not showing selected option
我正在使用 AngularJS 和 Angular Material 開發一個應用程序。
在模板中,我有:
<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
不顯示“John Doe”,但是通用的默認占位符“用戶”。
有什么不見了?
也許,下面的代碼會幫助你
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.