AngularJS - Lodash html 大写使用

Question

我正在使用 Lodash - angularJS。

_.capitalize('angularjs') from controller working for me.

Output:Angularjs

我正在使用翻译器。即，angularjs 从翻译加载

在主控制器中获取当前语言

var language = window.navigator.userLanguage || window.navigator.language;
$translate.use(language);

使用下面的配置函数

function configFunction($translateProvider) {
    $translateProvider
        .translations('en-US', {
            angularjs: "angularjs",
            java: "java"
        })
        .translations('en-UK', {
            angularjs: "angularjs",
            java: "java"
        });

    $translateProvider.preferredLanguage('en-US');
}

angular
    .module('angularjsApp')
    .config(configFunction)

我想从 html 中使用它。我该如何使用？

Answer 1

像这样创建一个过滤器并在绑定中使用管道 (|)

(function() {
    'use strict';

    angular
        .module('common', [])
        .filter('capitalize', capitalize);

    capitalize.$inject = [];
    function capitalize() {
        return capitalizeFilter;

        ////////////////
        function capitalizeFilter(text) {
            return _.capitalize(text);
        };
    }

})();

在html中

<div>{{"angularjs" | capitalize}}</div>

Working DEMO

Answer 2

相当模糊的问题。如果我理解，那么您想使用 Angular 数据绑定在 html 中显示上述内容，即。将变量绑定到您的 html 元素并在该变量上运行 Lodash 方法。

<div ng-app="myApp" ng-controller="myCtrl">
    Somevar: <input type="text" ng-model="myVar">
</div>

<script>
    var app = angular.module('myApp', []);
    // load your Lodash module
    app.controller('myCtrl', function($scope) {
        // bind a dynamic variable to your html
        $scope.myVar = _.capitalize('angularjs');
    });
</script>

Answer 3

我不建议您这样做，您应该将结果值传递给您的范围，但如果您需要这样做，只需将 Lodash 添加到您的 $scope 中，如下所示：

// controller
$scope._ = _;

{{_.capitalize('angularjs') | translate}}

Answer 4

这里有一个完整的解决方案

angular.module('app', ['pascalprecht.translate'])
.config(function ($translateProvider) {
   $translateProvider.translations('en', {
     Angularjs: 'angularjs'
   });
})
.constant('_', window._)
.filter('capitalizeIt', ['_', function(_) {
    return function(str) {
        return _.capitalize(str)
    }
}]);

现在在你的视野中

<h1>Hello {{'angularjs' | translate | capitalizeIt }}!</h1>

在plnkr上完成工作演示