satya satya - 4 months ago 31
AngularJS Question

How to support multi language to my HTML page using Angular.js/Javascript

I need one help.I need to change language my All text present inside my HTML page dynamically using Angular.js/Javascript. I am explaining my code or scenario below.

<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
<label>Language</label>
<select>
<option value="">Select langauage</option>
<option value="1">English</option>
<option value="2">Spanish</option>
</select>
<form>
First name:<br>
<input type="text" name="firstname" placeholder="firstname"><br>
Last name:<br>
<input type="text" name="lastname" placeholder="lastname">
</form>


Above one drop down is present to select different language .Here my requirement is suppose user selected language as
spanish
all static text present over there will change to spanish language and if user will again select
english
the all data will re change to english. Please help me.

Answer

You can use the standard HTML lang attribute:

<span lang="en">Scale</span><span lang="de">MaƟstab</span>

And then you can hide and show the matching elements:

function select_language(language) {
    $("[lang]").each(function () {
        if ($(this).attr("lang") == language)
            $(this).show();
        else
            $(this).hide();
    });
}

I use a simple selection:

<select onchange="select_language(this.options[this.selectedIndex].value)">
  <option value="en" selected>English</option>
  <option value="de">Deutsch</option>
</select>

Other Option

Translate Content in JavaScript an HTML with the Google Translate API

http://www.jqueryscript.net/text/jQuery-Plugin-To-Translate-Webpage-In-A-Given-Language-localizationTool.html