I'm having issues configuring a locale change in my Angular app. I'm using Angular Moment and Moment.js
First, I'm setting the locale to english in my angular.module.config and immediately setting the relative time object as I need:
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"
}
});
This works as intended,
Now I also have an equal object but for german. I don't know where to drop it because if I drop it in the config it overrides the english config.
Then I have a select dropdown in a header menu view with EN and DE (I'm already getting it to lower case for translations) in my controller and I can't seem to associate the amMoment.changeLocale('de');
to change the moment part to german, and I can't seem to update it with moment directly as well.
How can I achieve this?
You can customize relativeTime
for multiple locale in succession without overriding the previous configuration.
You can use ng-change
to bind the dropdown change to a function that calls amMoment.changeLocale
for the selected locale.
Note that you have to import moment-with-locales
or all required locale files in order to use moment with non-default locales.
If I understood what you want to accomplish, here there is a working example:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.