Angular Material 中的下拉菜单标签未更新。文本框的标签正在更新。我创建了一个 js fiddle 来演示。如果您单击下拉菜单并单击关闭而不选择任何内容，它们就会更新
https://jsfiddle.net/Anderson7301/suunyz3e/205/
var app = angular.module('ExpenseApp', [
'ngMaterial',
'ngMessages',
'pascalprecht.translate'
])
app.config(function($mdThemingProvider) {
// Configure a dark theme with primary foreground yellow
$mdThemingProvider.theme('docs-dark', 'default')
.primaryPalette('yellow')
.dark();
});
app.config(["$translateProvider", function($translateProvider) {
var en_translations = {
"LoadCreditCardExpenses": "Load Credit Card Expenses",
"employeeName": "Employee Name",
"EmployeeVendorNumber": "Employee Vendor Number",
"CostCenter": "Cost Center",
"Department": "Department",
"Manager": "Manager",
"TravelMonth": "Travel Month",
"TravelYear": "Travel Year",
"CreditCardBalanceDue": "Credit Card Balance Due",
"CashAdvance": "Cash Advance",
"Submit": "Submit",
"ExpenseReport": "Expense Report"
}
var sp_translations = {
"LoadCreditCardExpenses": "Los gastos de carga de tarjetas de crédito",
"employeeName": "nombre de empleado",
"EmployeeVendorNumber": "número de proveedor empleado",
"CostCenter": "centro de coste",
"Department": "Departamento",
"Manager": "Gerente",
"TravelMonth": "Mes del viaje",
"TravelYear": "Viaje año",
"CreditCardBalanceDue": "Tarjeta de crédito Debido Equilibrio",
"CashAdvance": "Adelanto en efectivo",
"Submit": "Enviar",
"ExpenseReport": "Informe de gastos"
}
$translateProvider.translations('en', en_translations);
$translateProvider.translations('sp', sp_translations);
$translateProvider.preferredLanguage('en');
}]);
app.controller('headerCtrl', function($timeout, $scope, $translate) {
$scope.changeLanguage = function(lang) {
$translate.use(lang);
}
$scope.months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
var d = new Date();
var currentYear = (d.getFullYear());
var lastYear = (currentYear - 1);
$scope.years = [
currentYear,
lastYear
];
})
<body ng-app="ExpenseApp">
<div layout="column" ng-cloak="" class="md-inline-form">
<md-content md-theme="docs-dark" layout-gt-md="row" layout-padding="">
<md-container>
<h2>{{'ExpenseReport' | translate}}</h2>
</md-container>
</md-content>
<md-content md-theme="docs-dark" layout-padding="">
<div ng-controller="headerCtrl">
<div layout-gt-md="row" layout-wrap>
<md-input-container class="md-block" flex-gt-sm="20" flex-sm="100">
<label>{{'EmployeeVendorNumber' | translate}}</label>
<input ng-model="employees.SAPVendorNumber" readonly>
</md-input-container>
<md-input-container class="md-block" flex-gt-sm="20" flex-sm="100">
<label>{{'CostCenter' | translate}}</label>
<input ng-model="employees.CostCenter" readonly>
</md-input-container>
<md-input-container class="md-block" flex-gt-sm="20" flex-sm="100">
<label>{{'Department' | translate}}</label>
<input ng-model="employees.OrganizationalUnitName" readonly>
</md-input-container>
<md-input-container class="md-block" flex-gt-sm="20" flex-sm="100">
<label>{{'Manager' | translate}}</label>
<input ng-model="employees.ManagerDisplayName" readonly>
</md-input-container>
</div>
<div layout-gt-sm="row" layout-wrap>
<md-input-container class="md-block" flex-gt-sm="20" flex-sm="100">
<label>{{'TravelMonth' | translate}}</label>
<md-select ng-model="months">
<md-option ng-repeat="month in months" value="{{month}}">
{{month.name}}
</md-option>
</md-select>
</md-input-container>
<md-input-container class="md-block" flex-gt-sm="20" flex-sm="100">
<label>{{'TravelYear' | translate}}</label>
<md-select ng-model="user.years">
<md-option ng-repeat="year in years" value="{{year}}">
{{year}}
</md-option>
</md-select>
</md-input-container>
<md-input-container class="md-block" flex-gt-sm="20" flex-sm="100">
<label>{{'CreditCardBalanceDue' | translate}}</label>
<input ng-model="user.employeeCCBalanceDue" ng-pattern="/^[0-9]+([,.][0-9]+)?$/">
</md-input-container>
<md-input-container class="md-block" flex-gt-sm="20" flex-sm="100">
<label>{{'CashAdvance' | translate}}</label>
<input ng-model="user.employeeCashAdvance" readonly>
</md-input-container>
<md-container class="md-block" flex-gt-sm="20" flex-sm="100">
<md-button ng-click="alert()">{{'Submit' | translate}}</md-button>
<md-button>{{'LoadCreditCardExpenses' | translate}}</md-button>
</md-container>
</div>
<div>
<button ng-click="changeLanguage('en')">English</button>
<button ng-click="changeLanguage('sp')">Spanish</button>
</div>
</div>
</md-content>
</div>
</body>
最佳答案
找到了解决方法。将占位符添加到允许其更新。我更新了“旅行月份”下拉列表，以便 Angular 翻译绑定(bind)，并保留“旅行年份”下拉列表相同以进行比较
https://jsfiddle.net/Anderson7301/suunyz3e/205/
<md-input-container class="md-block" flex-gt-sm="20" flex-sm="100">
<label>{{'TravelMonth' | translate}}</label>
<md-select ng-model="months" placeholder="{{'TravelMonth' | translate}}">
<md-option ng-repeat="month in months" value="{{month}}">
{{month.name}}
</md-option>
</md-select>
</md-input-container>
关于angularjs - Angular Material 下拉标签未使用 Angular 翻译进行更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37170619/