角度モーメント - カスタマイズされたロケールオブジェクトでロケールを変更する

Question

角度アプリでロケール変更を設定する際に問題があります。私はAngular MomentとMoment.jsを使用してい

まず、私は私のangular.module.configに英語にロケールを設定し、私が必要とすぐに相対的な時間オブジェクトを設定しています：

  moment.locale('en', { 
       relativeTime: { 
        future: "In %s", 
        past: "%s ago", 
        s: "<1 minute", 
        m: "1 minute", 
        mm: "%d minutes", 
        h: "1 hour", 
        hh: "%d hours", 
        d: "24 hours", 
        dd: "%d days", 
        M: "1 month", 
        MM: "%d months", 
        y: "1 year", 
        yy: "%d years" 
       } 
      }); 

この作品を

私は同じオブジェクトを持っていますが、ドイツ語です。私はそれを設定にドロップすると、それは英語の設定を無効にするため、どこにドロップするのかわかりません。

次に、ENとDE（私はすでに変換のために小文字にしています）のヘッダーメニュービューで選択ドロップダウンを持っています。私はamMoment.changeLocale('de');をモーメントの部分を変更するために関連付けることはできません。ドイツ語には、私は瞬時に直接更新するように見えることはできません。

どうすればこの問題を解決できますか？

Answer 1

以前の設定を上書きせずに、複数のロケールに対してrelativeTimeを連続してカスタマイズすることができます。

ng-changeを使用すると、ドロップダウンの変更を、選択したロケールのamMoment.changeLocaleを呼び出す関数にバインドできます。

デフォルト以外のロケールでモーメントを使用するには、moment-with-localesまたはすべての必要なロケールファイルをインポートする必要があります。

私はあなたが達成したいものを理解している場合、ここでの実施例がある：

angular.module('MyApp',['angularMoment']) 
 
.run(function(){ 
 
    moment.updateLocale('en', { 
 
    relativeTime: { 
 
     future: "In %s", 
 
     past: "%s ago", 
 
     s: "<1 minute", 
 
     m: "1 minute", 
 
     mm: "%d minutes", 
 
     h: "1 hour", 
 
     hh: "%d hours", 
 
     d: "24 hours", 
 
     dd: "%d days", 
 
     M: "1 month", 
 
     MM: "%d months", 
 
     y: "1 year", 
 
     yy: "%d years" 
 
    } 
 
    }); 
 
    moment.updateLocale('de', { 
 
    relativeTime: { 
 
     future : 'in %s', 
 
     past : 'vor %s', 
 
     s : '<ein Minute', 
 
     m : 'ein Minute', 
 
     mm : '%d Minuten' 
 
    } 
 
    }); 
 
}) 
 
.controller('AppCtrl', function($scope, moment, amMoment) { 
 
    $scope.last_update = moment().valueOf(); 
 
    $scope.lang = 'en'; 
 
    
 
    $scope.changeLang = function(){ 
 
    amMoment.changeLocale($scope.lang); 
 
    }; 
 
    $scope.changeLang(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment-with-locales.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/0.10.3/angular-moment.min.js"></script> 
 

 
<div ng-app="MyApp" ng-controller="AppCtrl"> 
 
    {{last_update|amDateFormat:'dddd, MMMM Do YYYY, HH:mm:ss a'}} 
 
    <br/> 
 
    <span am-time-ago="last_update"></span> 
 
    <br/> 
 
    
 
    <select name="singleSelect" ng-model="lang" ng-change="changeLang()"> 
 
    <option value="en">EN</option> 
 
    <option value="de">DE</option> 
 
    </select> 
 
    
 
    {{lang}} 
 
    
 
</div>