【问题标题】:angularjs filter 'date' and $locale serviceangularjs 过滤器“日期”和 $locale 服务
【发布时间】:2014-11-30 17:21:59
【问题描述】:

似乎angularjs嵌入了一些国际化的资源:

Angular 支持 i18n/l10n 的日期、数字和货币过滤器。 此外,Angular 支持可本地化的多元化支持 通过 ngPluralize 指令。所有可本地化的 Angular 组件 取决于由 $locale 服务管理的特定于语言环境的规则集。

如果找到$locale service 但不知道如何在 fr-fr 中指定语言环境...

以下代码:

{{article.date_collected | date:'EEEE dd MMMM yyyy'}}

给:

2014 年 10 月 6 日星期一

但我想要:

隆迪 2014 年 10 月 6 日

有什么建议吗?

【问题讨论】:

    标签: angularjs filter localization internationalization


    【解决方案1】:

    最后我在 angular github 页面上找到了响应: https://github.com/angular/bower-angular-i18n#bower-angular-i18n

    编辑:关于什么对我有用的更多信息

    在你的应用根目录中,从 bower 安装资源

    bower install angular-i18n
    

    如果您使用 bower/buildjs 将所有脚本压缩到 vendor.js 文件,请在此 cmets 标签之间的 index.html 中添加 <script>

    <!-- endbower -->
    <script src="bower_components/angular-i18n/angular-locale_fr-fr.js"></script>
    <!-- endbuild -->
    

    就是这样。

    【讨论】:

    • 你能在答案中添加一个例子吗?
    • 例子会很好。我在那个链接后面找不到任何有用的东西。
    • 还是没有例子吗?真的很有帮助!
    • 嗨,由于bowergrunt-wiredep 插件,我无法创建jsfiddleplunkr 或任何其他插件,因此附加了此问题 js 沙箱,因为它们不允许使用 Grunt 工具。我可以建议您阅读grunt-wiredep documentationbower documentation。顺便说一句,这篇文章很旧,2014 年!我确信 Angular 现在有更好的方法来做到这一点;)
    • 我们可以根据用户的选择来改变它吗?我有 3 种不同语言的语言下拉菜单,所以我需要它根据不同的语言动态呈现。
    【解决方案2】:

    使用示例,根据 https://docs.angularjs.org/guide/i18n

    1) 从 angular repo 或通过 bower 获取所需的语言环境,例如 //raw.githubusercontent.com/angular/bower-angular-i18n/master/angular-locale_fr-fr.js

    2) 将其包含在 Angular 库之后,例如

    <script src="vendor/angular.min.js"></script>
    <script src="vendor/angular-locale_fr-fr.js"></script>
    

    3) 现在,每当您使用 ng 日期过滤器显示日期时,它将采用法语-法国格式,而不是美国英语格式,例如

    {{date | date: 'fullDate'}}
    

    还有一种方法可以以编程方式处理多个本地人,这是在 AngularJS 主页“啤酒柜台”示例中完成的,带有

    angular.module('app-us', ['app', 'ngLocal.us']);
    angular.module('app-sk', ['app', 'ngLocal.sk']);
    

    <script src="//code.angularjs.org/1.4.4/i18n/angular-locale_sk.js"></script>
    <script>
    angular.module('ngLocal.sk', [])._configBlocks.push(angular.module('ngLocale')._configBlocks[0]);
    </script>
    <script src="//code.angularjs.org/1.4.4/i18n/angular-locale_en-us.js"></script>
    <script>
    angular.module('ngLocal.us', [])._configBlocks.push(angular.module('ngLocale')._configBlocks[0]);
    angular.bootstrap(document, ['ngRoute', 'homepage', 'ngLocal.us']);
    </script>
    

    这是一种更简洁的方法: https://github.com/lgalfaso/angular-dynamic-locale

    【讨论】:

    • 感谢@pansay 的回答。但是要小心,就我而言,问题是由grunt / bower html cmets 标签之间的自动包含库引起的 &lt;!-- endbower --&gt;, &lt;!-- endbuild --&gt;, ...
    猜你喜欢
    • 2014-01-06
    • 2014-07-22
    • 2015-06-10
    • 1970-01-01
    • 1970-01-01
    • 2017-06-29
    • 1970-01-01
    • 2013-08-23
    • 1970-01-01
    相关资源
    最近更新 更多