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：

＆＃13;

// controller
$scope._ = _;

＆＃13;

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

＆＃13;

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

上的完整工作演示

AngularJS - Lodash html大写使用

4 个答案: