Home AngularJS-Translate Text while typing
Reply: 0

AngularJS-Translate Text while typing

Imran Hossain
1#
Imran Hossain Published in 2017-12-07 19:11:38Z

I am doing a project where I have to use 2 languages. One is English and other would be Arabic. So if I type text into a textbox in English , the typed text will convert into Arabic Language or vice-versa.

How can I do this with AngularJS?

In most cases given solution are based on changing whole content. But I have to change the input text only.

what I need is that, If I input in English textbox output should come in Arabic textbox. And If I input in same Arabic textbox output should come in English textbox. Here is the code.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script>
        angular.module('app', [])
            .run(function($rootScope, $http) {
                $rootScope.modelOptions = { updateOn: 'keyup' };
                $rootScope.loadingarb = '';
                $rootScope.loadingeng = '';
                $rootScope.translatetoArb = function(data) {
                    $rootScope.loadingarb = '...';
                    $http.get('https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=ar&dt=t&q=' + data)
                        .then(function (res) {
                            $rootScope.translationarb = res.data[0][0][0];
                        });
                };
                $rootScope.translatetoEng = function (data) {
                    $rootScope.loadingeng = '...';
                    $http.get('https://translate.googleapis.com/translate_a/single?client=gtx&sl=ar&tl=en&dt=t&q=' + data)
                        .then(function (res) {
                            $rootScope.translationeng = res.data[0][0][0];
                        });
                };
            });
    </script>
</head>
<body>
<div ng-app="app">
    English: <input type="text" ng-keyup="translatetoArb(Eng_Lang)" ng-model="Eng_Lang" ng-model-options="modelOptions" />

    <br/>
    Arabic : <input type="text" ng-keyup="translatetoEng(Arb_Lang)" ng-model="Arb_Lang" ng-model-options="modelOptions" value="{{ translationarb }}{{ loadingarb }}"/>

</div>
</body>
</html>
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.319823 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO