Using AngularJS controller to implement filtering functionality

I am a beginner at using Angular and have successfully implemented a filter to translate text for localization in my HTML view:

<input type="button" class="btn btn-link" value="{{'weeklyOrdersPage.reposting' | translate}}" ng-click="sortBy('reposting')" />

This filter retrieves text from a resource file and displays it, working perfectly.

Now, I want to achieve something similar in my controller where I am integrating a Google Map using the JavaScript API. I need to dynamically set the marker's text based on the selected language. I attempted this code which did not work as expected:

var markerContent = '<div class="infoWindowContent">' +
                                       '<div><b>' + $filter('translate')("{{'weeklyOrdersPage.panelId'}}") + ': </b>' + panel.id + '</div>' +
                                       '<div><b>' + $filter('translate')("{{'weeklyOrdersPage.panelClassification'}}") + ': </b>' + panel.panelClassification + '</div>' +
                                       '<div><b>' + $filter('translate')('{{weeklyOrdersPage.quality}}') + ': </b>' + panel.format + '</div>'
                    '</div>';

Any suggestions on how to proceed?

Answer №1

When writing code in the controller, there is no need to use double curly braces.

$filter('translate')('weeklyOrdersPage.panelId')
$filter('translate')('weeklyOrdersPage.panelClassification')
$filter('translate')('weeklyOrdersPage.quality')

This should resolve the issue.

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

Clearing selections from a multiple-choice input field

I am seeking to implement a delete feature in a multi-select element similar to the functionality seen here on stackoverflow when selecting multiple tags for a question. Once an item is selected, I would like to display a close icon next to it so that user ...

When working with a barcode font in Chrome, using style.fontFamily may not be effective, but utilizing className can achieve the desired result

Take a look at this HTML snippet: <style> .barcode { font-family: 'BC C39 3 to 1 Medium'; } </style> <div><span id='spn'>1234567</span></div> This code will apply a barcode font style: <script> ...

The issue I'm facing is that the style loader is failing to load the CSS within the <head

I am currently facing an issue with importing my CSS into my webpack bundle for our Angular 1 application. Initially, everything was working fine as we bundled our application using Webpack. The HTML included the bundle and vendor scripts, additional Java ...

Is there a way to determine the actual time or percentage completion of a file upload using Telerik RadUpload?

Utilizing the Telerik upload file control with manager is a key component of my project: <telerik:RadUpload ID="RadUpload" Runat="server" MaxFileInputsCount="5" /> <telerik:RadProgressManager ID="RadProgressManager" Runat="server" /> For clie ...

Can you explain which variable is considered global in Node.js?

Instead of writing var global = window for the browser I want my code to be able to work in a node environment as well. Something like var global = window || node_global What is node_global? I couldn't find any clear answer here: or here https ...

Update JSON data in ng-blur event using AngularJS

Could you offer some guidance on how to push the content from a text box into JSON when I click outside of the box? Below is the code for my text box: <input type="text" name="treatmentCost" class="form-control" ng-model="addTemplate" /> And here i ...

Creating a fixed sidebar that remains visible while scrolling in Next.js

Currently, I am faced with the challenge of implementing two components - a feed and a sidebar. The sidebar contains more content than it can display at once, so I want it to be able to overflow. My goal is to have the sidebar scroll along with the content ...

Retrieve targeted data from the database using AngularJS and Firebase

Apologies for bothering you with this, I have spent countless hours searching for a solution but I've hit a roadblock. I'm on the verge of giving up on working with angularjs and firebase because I just can't seem to grasp it.. I am attempt ...

Running a 2D JavaScript game script on a React page - A step-by-step guide!

I am facing a challenge with my website that features a game coded entirely in javascript. Despite my efforts to switch the site from an HTML layout to a more modern React design, I can't seem to get the game to display correctly. In the original HTM ...

Execute Function after Gridview Sorting

While working on a gridview within an update panel, I encountered a scenario where the gridview successfully resorts itself upon clicking on the column header. However, post-sorting, I wish to execute a JavaScript function named MyScript. Any suggestions ...

What is the best way to implement a switch that can simultaneously display both the on and off positions?

I need help customizing a toggle switch element in CSS. I want the first row to display as on (blue color) and the second and third rows to be displayed as off or grey. So far, my attempts to modify the CSS code have been unsuccessful. .switch { posi ...

Struggling to deploy a basic node.js application to Heroku or connect it with MongoDB

Currently, I'm facing some challenges trying to deploy a simple Twitter-like app to HEROKU or MongoDB. However, I seem to be hitting roadblocks with both platforms. With MongoDB, I encounter either an internal server error or the actual code displayin ...

Tips for fetching data from a database using AJAX when the values of two drop-down lists are involved

I have successfully implemented an Example where I retrieve data using a single drop-down list from a database. Now, I want to extend this functionality to work with two drop-down lists, where the values retrieved from the database are dependent on the sel ...

How can we verify the validity of URLs based on their length, presence of capital letters, and specific whole words?

I'm currently working on a piece of code that verifies the URL provided by users during sign-up for my application. I want to implement the following restrictions: URL must be at least 3 characters long No capital letters allowed Avoid certain words ...

Encountering a problem with the Batarang tool while constructing a MEANJS demo (Uncaught TypeError: Unable to access property 'getToggleElement' of null)

Trying to utilize the AngularJS Batarang while learning to create a MEANJS App. You can find the tutorial here: Noticing that my "Scopes" tab appears differently compared to the tutorial video and an error is displayed. Here is what I see in my Batarang ...

A different approach to fixing the error "Uncaught (in promise) TypeError: fs.writeFile is not a function" in TensorFlow.js when running on Chrome

I've been attempting to export a variable in the TensorFlow posenet model while it's running in the Chrome browser using the code snippet below. After going through various discussions, I discovered that exporting a variable with fswritefile in t ...

The Electron BrowserWindow turns dark post execution of the .show() method

Revision: After some tinkering, I discovered that the issue was related to the order in which I created the windows. Previously, my code looked like this: app.whenReady().then(() => { createWindow(); spawnLoadingBlockWindow(); spawnGenerati ...

Unlocking the power of bitwise operations in VueJS with Javascript

Forgive me if this sounds like a silly question. I'm currently using vue-moment within my Vue.js application and I have the following code snippet: <!-- date = '2020-03-23 01:01:01' --> <span>{{ date | moment('from', & ...

Running repetitive tasks in PHP using setInterval function

I've been working on adding a "friend request" feature to my website and I really want the requests to show up instantly without having to reload the page. After doing some research, it seems like using setInterval with Ajax is the way to go. I found ...

What is the reason behind negative numbers appearing as "5-" rather than "-5" in the basic calculator coded using HTML and JavaScript?

As I am practicing my coding skills, I encountered an interesting issue. Any operation that results in a negative number displays as wrong, but when using console.logs it shows the correct result. Can someone explain why this is happening? <!DOCTYPE h ...