Angularjs 角度材质下拉标签不使用角度平移更新_Angularjs_Data Binding_Label_Angular Material_Angular Translate

Angularjs 角度材质下拉标签不使用角度平移更新

angularjs data-binding angular-material

Angularjs 角度材质下拉标签不使用角度平移更新,angularjs,data-binding,label,angular-material,angular-translate,Angularjs,Data Binding,Label,Angular Material,Angular Translate,角度材质中下拉列表的标签不更新。文本框的标签正在更新。我创建了一个js小提琴来演示。如果单击下拉列表并从中单击而不选择任何内容，则它们会更新 var-app=angular.module（'ExpenseApp'[ “ngMaterial”， "ngMessages",， “pascalprecht.翻译” ]) app.config（函数（$mdThemingProvider）{ //使用主前景黄色配置深色主题 $mdThemingProvider.theme（'docs-dark'，'de

角度材质中下拉列表的标签不更新。文本框的标签正在更新。我创建了一个js小提琴来演示。如果单击下拉列表并从中单击而不选择任何内容，则它们会更新

var-app=angular.module（'ExpenseApp'[
“ngMaterial”，
"ngMessages",，
“pascalprecht.翻译”
])
app.config（函数（$mdThemingProvider）{
//使用主前景黄色配置深色主题
$mdThemingProvider.theme（'docs-dark'，'default'）
.primaryPalette（“黄色”）
.dark（）；
});
app.config（[“$translateProvider”），函数（$translateProvider）{
变量en_翻译={
“加载信用卡费用”：“加载信用卡费用”，
“员工姓名”：“员工姓名”，
“员工供应商编号”：“员工供应商编号”，
“成本中心”：“成本中心”，
“部门”：“部门”，
“经理”：“经理”，
“旅行月”：“旅行月”，
“旅行年”：“旅行年”，
“信用卡到期余额”：“信用卡到期余额”，
“预付现金”：“预付现金”，
“提交”：“提交”，
“支出报告”：“支出报告”
}
变量sp_转换={
“信用卡费用”：“信用卡费用”，
“员工名称”：“员工名称”，
“EmployeeVendorNumber”：“número de proveedor Employeedo”，
“成本中心”：“成本中心”，
“部门”：“部门”，
“经理”：“Gerente”，
“旅行月”：“维亚杰之旅”，
“旅行年”：“Viaje año”，
“信用卡余额到期日”：“信用卡余额平衡日”，
“预付现金”：“Adelanto en efectivo”，
“提交”：“Enviar”，
“ExpenseReport”：“Informe de gastos”
}
$translateProvider.translations（'en'，en_translations）；
$translateProvider.translations（'sp'，sp_translations）；
$translateProvider.preferredLanguage（'en'）；
}]);
应用控制器（'headerCtrl'，函数（$timeout，$scope，$translate）{
$scope.changeLanguage=函数（lang）{
$translate.use（lang）；
}
$scope.months=[
“一月”，
“二月”，
“三月”，
“四月”，
“五月”，
“六月”，
“七月”，
“八月”，
“9月”，
“十月”，
“11月”，
“12月”
];
var d=新日期（）；
var currentYear=（d.getFullYear（））；
var去年=（当前年份-1）；
$scope.years=[
本年度，
去年
];
})
{{'ExpenseReport'| translate}}
{{'EmployeeVendorNumber'| translate}
{{'CostCenter'| translate}}
{{'Department'| translate}}
{{'Manager'| translate}
{{'TravelMonth'| translate}
{{month.name}
{{'TravelYear'| translate}
{{year}
{{'CreditCardBalanceDue'|翻译}
{{'cashpadvance'| translate}
{{'Submit'| translate}}
{{'LoadCreditCardExpenses'| translate}
英语
西班牙的

找到了解决方法。将占位符添加到允许其更新。我更新了“旅行月”下拉列表，使“旅行年”下拉列表保持不变，以便进行比较


{{'TravelMonth'| translate}
{{month.name}

我在检查DOM时注意到的另一件事是，绑定到md select的标签具有类“ng binding md placeholder”，而其他标签只有“ng binding”。显然，材料设计中似乎存在缺陷。

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>

<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>