Home AngularJS-Translate Text while typing
Reply: 0

AngularJS-Translate Text while typing

user2366 Published in April 22, 2018, 12:41 am

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>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></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];
<div ng-app="app">
    English: <input type="text" ng-keyup="translatetoArb(Eng_Lang)" ng-model="Eng_Lang" ng-model-options="modelOptions" />

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

You need to login account before you can post.

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

© 2016 Powered by mzan.com design MATCHINFO