Im using Angular Translate, specifically the filter translate with dynamic values (https://angular-translate.github.io/docs/#/api/pascalprecht.translate.filter:translate). I want to translate a string and include a dyncamic value. In my translations file I have:
products:
searchResults: "Search results for {{ searchTerm }}"
And in my jade template:
.bg-info(ng-show='productVM.search') {{ 'products.searchResults' | translate:'{searchTerm: productVM.search}' }}
So when I type, the controller property search contains the string and the div shows, except the result is:
Search results for
If I was to replace 'productVM.search' with 'test', it would work:
Search results for test
It appears that angular translate doesnt like if the value pass to it is dynamic. Anyway around this?
Related
I have added a custom field field_instruction (plain text field) in a new content type.
I would like to display the field like {{ content.field_instruction }} in node.html.twig. However, it failed.
I tried {{ content.field_instruction[0] }} or {{ content.field_instruction.value }}, it does not success.
Can anyone advise me how to display this field?
To render a field's default value inside node.html.twig, try use a Twig variable as in {{ node.field_some_name.value }}.
I am using angular translate directive in my application. Now i am translating a key which returns a string.
<div translate="TRANSLATION_KEY"></div>
suppose I got the translation in string form as apply online for this course.
Now i want this string to limit to only 12 characters like thisapply online....
so i have done like this
<div {{translate="TRANSLATION_KEY | limitTo:12 }}"></div>
but this is not correct
so
how can i use limitTo filter when expression is coming from translation itself.
Also what is the use of translate-values and translate-compile.
Limiting string with limitTo filter
{{ limitTo_expression | limitTo : limit : begin}}
https://docs.angularjs.org/api/ng/filter/limitTo
{{ "My String Is Too Long" | limitTo: 9 }}
Which will output:
My String
Or use following approach (not using the translate directive.
<span>{{TRANSLATION_KEY|translate|limitTo:9}}</span>
https://angular-translate.github.io/docs/#/guide/04_using-translate-filter
About the other question regarding the angular-translate directive.
The translate directive expects an optional translate-values
attribute you can use to pass some values through it. All you have to
do is to combine the directive with the translate-values attribute.
You can pass either an object literal as string, expression, or, if
the value is dynamic, an interpolation directive. Whatever you pass
in, it gets internally evaluated and parsed by translate filter, so
what comes out is a plain old JavaScript object which gets passed to
$translate service.
<ANY translate="TRANSLATION_ID"
translate-values='{ username: "PascalPrect"}'></ANY>
or
<ANY translate="TRANSLATION_ID"
translate-values="{ username: someScopeObject.username }"></ANY>
or
<ANY translate="TRANSLATION_ID"
translate-values="{{translationData}}"></ANY>
Post compiling
Starting with version 2, the translation itself can be post processed
in context of the current scope (using $compile). This means any
directive used in a translation value itself will now work as
expected.
This behavior can be enabled per directive:
<ANY translate="TRANSLATION_ID" translate-compile></ANY>
In addition to it, you can also enable the feature globally with...
$translateProvider.usePostCompiling(true);
... and even then you can disable the feature again per directive:
<ANY translate="TRANSLATION_ID" translate-compile="false"></ANY>
I have a a controller that generates $scope.product = response.data
In my html template if type {{ product }} it shows the requested metadata in an array including the id and name. However, unless I go through the ng-repeat do ng-repeat='item in product' it won't print id and an name even though I have only one record.
For example {{ product.id }} and {{ product.name }} can be displayed only as {{ item.id }} and {{ item.name }}
I have even tried $scope.product.id = response.data.id and $scope.product.name = response.data.name
Use Case:
Print the product name and other information on a card
Use product.id to take other actions e.g. add to cart.
$scope.product is an array. So it doesn't have any attribute named id or name. Its unique, first element is an object that does have those attributes. So, if you know your array has a single element, what you needs is $scope.product[0].id and $scope.product[0].name.
An array is like a box. A box doesn't become an egg if it contains a single egg. It's still an egg. And trying to fry the box won't lead to a very tasty result. You still need to get the unique egg out of the box and fry the egg.
That said, your backend should probably not return an array containing one product if the service is supposed to return a single product. It should return the product itself.
I have a page that displays a bunch of items and I have a sidebar with some selects and a search field that are used to filter the items that show up.
It works fine but now I have to make a search results page.
The client gets to the search result page with a query string ?s=something
I got the search query by doing this:
$scope.searchTerm = $location.search().s;
So I thought that If I set the search field(that filters the results) value to {{searchTerm}} that would do the trick but I was wrong.
The search field shows up with the query string on it but it does not filter.
Imagine I have a product called product x and my search query is venus. All products are still being shown. Any ideas?
If you have an input similar to this:
<input type="text" ng-model="dataFilter" class="form-control">
Then your repeat needs to include the ng-model as the filter like this:
ng-repeat="user in dataSet | filter: dataFilter"
Then just assign the filter you want to the $scope variable for the search filter, in this case that would be $scope.dataFilter.
Here's a plnkr example I put together for you:
http://plnkr.co/edit/isYfL6mVLPusc94mivGA?p=preview
I can easily bind data to a div or pre tag with the code:
<div id="json_route{{route.id}}" ng-bind="items.route{{route.id}} | json"></div>
However, I want to try and bind this data to a hidden form input, I tried:
<input type="hidden" name="json_route{{ route.id }}"
ng-model="items.route{{route.id}} | json" />
Which returns me an error of:
Error: Non-assignable model expression: items.route2 | json (<input type="hidden" name="json_route2" ng-model="items.route2 | json">)
So obviously I cannot use | json when using ng-model. The angular docs are still a bit sparse and I can't seem to find how to assign this correctly, even if I can? Thanks :)
I need to get this json data loaded into my pyramid application, and assigning it into a hidden form field seemed the best way todo it, or should I be doing this in a different way?
"To be able to render the model into the view, the model has to be able to be referenced from the scope." (src: Angular Guide).
Angular needs to be able to reference the value in your ngModel expression to a $scope variable in your controller.
With ng-bind it worked, because ng-bind is not the same as ng-model. ngBind simply takes your expression and evaluates it inside the current scope and than replaces the text of the host element with the result. As Guide tells us, the value of ng-model must be an assignable angular expression to data-bind to.
To have your hidden input contain the json string representation of your 'items.route2' model you could setup a $watch expression in your controller which would "prepare" the json string of your model whenever it changes. See plnkr example.
Try using ng-init:
<input type="hidden" name="..." ng-model="items.route{{route.id}}"
ng-init="items.route{{route.id}} = data_from_server_here">
See also https://stackoverflow.com/a/12657601/215945.