CODEWITHSUNDEEP
javascriptangularjs
Niranjan Godbole
Niranjan Godbole

Reputation: 2175

How to set rtl property based on language change in angularjs?

Hi i am developing angularjs application and it is multilingual application with english and arabic. Whenever i select arabic language i want to apply rtl support to html tag. will work fine but i want to do this based on the language selection.

Below is my html code

<div class="language">
 <a href="#" ng-click="changeLanguage(lang == 'de_AR' ? 'de_EN' : 'de_AR')">
  <img ng-src="images/{{ lang == 'de_AR' ? 'english.png' : 'arabic.png' }}" />
 </a>
</div>

Below is my angular code

$scope.changeLanguage = function (lang) {
  $scope.lang = lang == 'de_AR' ? 'de_AR' : 'de_EN';
  $cookieStore.put("PreferredLanguage", $scope.lang);
  $translate.use($scope.lang);
}

In the above code if the language selected then i want to add otherwise simply . I tried as below. 

if($scope.lang="de_AR")
{
 $scope.rtl="rtl"
}

Below is my html tag.

<html ng-app="RoslpApp"  dir="{{rtl}}">

Above code doesnt provide rtl support. May i get some help to fix this? May i know am i missing something here? Any help would be appreciated. Thank you.

Upvotes: 1

Views: 2206

Answers (1)

Vivz
Vivz

Reputation: 6620

You can do ternary operations on $scope.lang to decide whether the page should be ltr or rtl

<html ng-app="RoslpApp" ng-controller="RoslpAppController"  dir="{{lang=='de_AR'?'rtl':'ltr'}}">

You have to define your ternary conditions within the scope of your controller to trigger. So place your ng-controller on html tag or move your dir to the place where you are defining ng-controller

Upvotes: 1

Related Questions