Issue with Angular translation when utilizing a dynamic key variable

I am currently developing a project with Angular Js and incorporating the Angular-translate module

In a specific scenario, I encountered an issue where the translation key needed to be stored as a variable. To address this, I created an object within the translations object that contains all potential variables.

When utilizing dot notation like translate='status.awaiting', everything functions as expected. However, when attempting to use bracket notation such as translate='status[status]', it fails to work altogether!

Below is a simplified example of the situation at hand. Any assistance would be greatly appreciated!

angular.module('myApp',['pascalprecht.translate'])
  
.config(function($translateProvider){
$translateProvider.useSanitizeValueStrategy(null);
  $translateProvider
    .translations('ar', {
      status:{
        "new":"جديد",
        "awaiting":"منتظر",
        "confirmed":"مؤكد",
        "shipped":"مشحون",
        "delivered":"مستلم",
        "returned":"مرتجع",
        "canceled":"ملغى"

    }
  })
    .preferredLanguage('ar');
})

.controller('myCtrl',function($scope){
  $scope.current_status = 'awaiting';
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.15.1/angular-translate.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <div  translate='status.awaiting'> </div>
  <div>{{current_status}} </div> 
  <div  translate='status[current_status]'> </div>
</div>

Answer №1

Consider attempting this approach:

  <span  translate='status.{{current_status}}'> </span>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Add a specific CSS class to a div element depending on the status of a checkbox

Is there a way to dynamically append data based on the selected items in a checkbox table? I want to be able to add multiple or single items by clicking the add button. The key is to avoid appending duplicate data that already exists in the view. Any sugge ...

Get user input from a textbox and use that input to conduct a search on Google

Hi there, I'm currently working on solving this particular problem. I'm attempting to create a HTML page using a form where the user can input a keyword and click on the "Search" button to search for that keyword on Google. I haven't had a ...

What is the correct way to integrate a HTML/CSS/JS theme into a Vue project effectively?

As a newcomer, I recently acquired a bootstrap theme that comes with HTML, CSS, and JavaScript files. My goal now is to integrate this theme into Vue in order to make it fully functional. The challenge I am facing is how to successfully incorporate the the ...

Navigating the terrain of multiple checkboxes in React and gathering all the checked boxes

I am currently developing a filter component that allows for the selection of multiple checkboxes. My goal is to toggle the state of the checkboxes, store the checked ones in an array, and remove any unchecked checkboxes from the array. Despite my attemp ...

Programming on the customer side

Are there any recommendations for a book published in 2015 that covers both Angular 2 and React? Also, are there any free online courses on Coursera or other platforms that cover these topics? I want to gain a good understanding of both technologies so tha ...

Error message: "An undefined index error occurred during an Ajax call to a

Path: homepage -> initiate ajax request to tester.php on PHP -> receive JSON data back to homepage. I am struggling to resolve this issue. Any help would be appreciated. AJAX Request: $.ajax({ url : "tester.php", ty ...

Tips for ensuring the HTML checkbox element is fully loaded before programmatically selecting it

When a user accesses the page, I want certain checkboxes to be automatically checked. To achieve this, I am storing the IDs of the HTML checkbox elements in a service. Upon entering the page, the service is utilized to retrieve an array containing these ID ...

The Vue mixin properties are devoid of content and lack reactivity

Could you please guide me in the right direction if this question has already been asked before? I really hope it's not a duplicate. I have a Vue application that is compiled using Webpack@NPM. In order to pass a property (roles) across all component ...

Problems encountered when attempting to create a link between two nodes on a force-directed graph using a mouse click

I'm currently working on creating an interactive graph where users can click on two nodes to establish a link between them (which can be removed later). My approach was inspired by Mike Bostock's example at: https://bl.ocks.org/mbostock/1095795 ...

What is causing the Unhandled Rejection (TypeError) error after I move the object in my Redux application and receive the message "Cannot read property 'filter' of undefined"?

I've been working on a Redux application. I've made modifications to a couple of files, and here are the changes in the two files: index.js: const store = createStore( reducer, { propReducer: { day: 1, data: [], filte ...

Transforming intricate JavaScript objects into JSON format using Node.js

Currently, I am engaged in a web scraping project and my goal is to construct a JSON object from the gathered data. Below is an outline of the steps I am taking to achieve this: var submitButton = driver.findElement(By.className('btn btn-primary& ...

D3 Treemap for handling extensive sets of data

I am uncertain if there exists a method to incorporate the desired feature. I am seeking a solution similar to zoomable treemaps, but to initially load a limited number of child levels and then dynamically add more child nodes without requiring a node clic ...

Issue with Moment.js amDateFormat consistently displaying date as 1970

Check out this link for more information I've integrated Moment.js and Angular-moment into my application. Oddly enough, all my epoch timestamps are being converted to the same date in 1970. <td class="timespan">{{tag.added_epoch | amDateForm ...

What is the reason behind the unnecessary requirement of adding {...props} when passing them to a component in a React router?

Recently, I delved into learning React and encountered a puzzling issue while following a course. To gain clarity, I decided to experiment with it separately, but the confusion remains unresolved. While researching, I discovered that when utilizing a Rout ...

Assigning the href attribute dynamically

How can you dynamically set the href attribute of the <a> tag using jQuery? In addition, what is the method for retrieving the value of the href attribute from the <a> tag with jQuery? ...

Performing real-time arithmetic calculations on dynamic text input fields using AngularJS

In the process of creating a dynamic form, the number of textboxes is determined by the situation at hand. Each textbox is assigned an arithmetic formula, which is obtained from a database table. The structure of my form will be as follows: <div ng-ap ...

Can I expect the same order of my associative array to be preserved when transitioning from PHP to Javascript?

While using PHP, I am executing a mysql_query with an ORDER BY clause. As a next step, I am going through the results to construct an associative array where the row_id is set as the key. After that, I am applying json_encode on that array and displaying ...

Extract specific data points from external API responses on a webpage crafted in HTML

I require assistance on how to extract individual values from an HTML page. I received a response from the PAYU payment gateway team in HTML format, but I need to retrieve specific attribute values related to the transaction details. Below is the response ...

The function $$.generatePoint is not recognized in the Billboard.js library

Having some trouble with integrating billboard.js into my Vue project as an alternative to using d3.js. Struggling to get it working in both my repository and a vanilla Vue project. Anyone familiar with the process of getting billboard.js running smoothly ...

Three Divs stacked on top of each other, with varying heights based on

I am seeking a solution for creating a layout with three vertically stacked divs. The top div must have a fixed height of 60px. The middle div might contain content exceeding its height, therefore we've set it to overflow: auto. But regardless of th ...