I'm working with an existing codebase and I need to figure out how this works:
{{'some_variable' | translate}}
It seems to correlate to some_variable in an api call but I don't see it in the controller.
In this project you are using angular-translate...
This module offers you directive, filter and a service to add translation into your application...
In the example you gave you are using translate filter (if you are not familiar with the angular filters check out documentation)...
There are some options that how angular translate get your translations but at the end it will something like javascript object like this...
{
some_variable: 'Some Variable translation'
}
translate filter will take your input 'some_variable' and find value for it from given translations (if it cannot find anything it will return key itself)...
Related
I have a lightning-card in lightning web component (LWC) and want to set the label attribute with two different variables. Although this can be done through the controller but I want to do this in html file itself.
As in the code snippet, I am assigning {cardTitle} as a title, but I have another variable {totalCount} and want to concatenate the totalCount along with the cardTitle here. So lightning-card should have title like "{cardTitle}{totalCount}".
<lightning-card title={cardTitle}></lightning-card>
//In Controler js
#track cardTitle = 'Student details';
#track totalCount = 0; //This will be set by the apex controller later and will have dynamic number
When I try below code
<lightning-card title={cardTitle}{totalCount}></lightning-card>
It shows error as
multiple expressions found
.
No. You can only do it in controller JavaScript file.
I love part of the answer on SF stackexchange so I'm going to quote it here:
Your concerns about separating UI from controller logic do not apply
here as this is not a "controller". That MVC pattern is an Aura-ism.
This is the code which drives your component's functionality so it
makes sense that your JS would know about class names.
It's different but think about it that way - it'll let you write a proper unit test for the JavaScript. How you'd test logic that exists only in HTML layer? Or only in Visualforce page markup?
You can have only one expression. If you read documentation like https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.reference_directives
you'll see
The expression can be a JavaScript identifier (for example, person) or dot notation that accesses a property from an object (person.firstName). The engine doesn’t allow computed expressions (person2.name['John']). To compute the value of expression, use a getter in the JavaScript class.
Could you explain me how to use Lodash _.template in order to get some value from script to .html file via {{data}} ?
For example:
In script.js I set some changes to my data object and in view.html. I want to get changed data with {{data}}
How to use lodash _.template() for this issue?
The lodash template function does not allow you to build templates from files (but you could do it when combined with Webpack). It has absolutely nothing to do with AngularJS templates. However in some situations it makes sense of using inside of AngularJS, like for example building a list of strings with a pattern or the like.
You compile a template string to a function you can call as often as you like with the values:
const executor = _.template("Hello <%= name %>, my old friend!");
console.log(executor({name: 'Alice'})); // Hello Alice, my old friend!
console.log(executor({name: 'Bob'})); // Hello Bob, my old friend!
You can also use conditional, loops, etc.: https://lodash.com/docs/4.17.15#template
Im trying to implement Bootstrap Typeahead in my AngularJS project and I came across an issue with values.
Im loading the content via $http from my Django API server. For now, I can lookup for any item I want and display it's name, but what I need is to display "title" but return "id" via ng-model back to the controller.
Do you have any working example of doing this?
http://pastebin.com/xtype9J4
I'm assuming you are using https://angular-ui.github.io/bootstrap/#/typeahead, so I'd suggest having a look at the last example.
Looking at the DOM, your code could look something like this:
uib-typeahead="company as company.name for company in getCompanies($viewValue)"
This pretty much contains exactly what you need. Additionally, take a look at https://docs.angularjs.org/api/ng/directive/select and https://docs.angularjs.org/api/ng/directive/ngOptions for further examples, as AngularUI has a similar (if not identical) approach.
http://www.scientiamobile.com/page/angularwit
Want to be able to do something like this:
<img-wit ng-src="{{trustSrc(profile.pic)}}" w="100"/>
The picture isn't rendering however, although the blank space is sized correctly. Is it possible to use angular directive version of img-wit with ng-src?
UPDATE:
Determined the easiest way to use img-wit is not to implement angularjs directive at all. Instead, just append appropriate img-wit link prefix inside controller.
Support to ngSrc directive has been added in the 0.9.1 version: https://github.com/WURFL/angular-wurfl-image-tailor/releases/tag/0.9.1.
Syntax like the follow is now supported:
<img-wit ng-src="{{myUrl}}"></img-wit>
where {{myUrl}} is the url of the trusted image to load.
Please check https://github.com/WURFL/angular-wurfl-image-tailor#how-to-use-it for further details.
Disclaimer: I work for ScientiaMobile
I need to remove all br tags from the json data I am working with before rendering to the template.
Im wondering if there is a pre-existing angular directive which could be used for this, or if there is a way to do it by creating a custom filter. The documantation on filters doesnt seem to be easily adaptable to this usecase.
Do you need to remove <br>s from a specific object property like remove HTML from a string (in JSON response) or do you need to remove them from all properties of the JSON object?
You should be able to just put some JavaScript code into a custom filter (the custom filter would return either a modified JSON object or a new object), and then call that filter from your HTML when you want to display the JSON.
If you are displaying different parts of your JSON object using different ng-repeat, ng-show, etc. directives, it might make more sense to filter the JSON once in your controller, then use the filtered version in the HTML/template. A little more information about your actual use case would help.