AngularJS interpolation issue with translate service - html

I have this ternary operator in my html (working correctly)
{{ qp.QP_TRANSFERS === '1' ? qp.QP_TRANSFER_TYPE_NAME + ' transfer' : 'No transfer' }}
I'm using translation service from json objects. This is an example of en_US.json file:
"myquotes": {
"PAGETITLE": "My quotes",
"DESCRIPTION": "List of all your asked quotes",
"packages": {
"label": {
"SEARCH": {
"TITLE": "Package quotes",
"DESCRIPTION": "Search by any column",
"QUOTE": "Quote",
"ADULTS": "Adults",
"MINORS": "Minors",
"TRANSFER": "transfer",
"NOTRANSFER": "No transfer"
}
},
}
}
And I use it like this:
{{ 'myquotes.packages.label.ADULTS' | translate }}
Is there a way to use this service in my ternary example?

In this plunker you have a working example of what I understand you are looking for.
You basically you have use parenthesis to wrap your ternary expression ( ... ) before you use the translate filter, but I recommend you to put that logic inside a function on your controller to have a more readable template:
<p>{{ ('myquotes.packages.label.SEARCH.' + (qp.QP_TRANSFERS === '1' ? 'TRANSFER' : 'NOTRANSFER')) | translate}}</p>
Or:
<p>{{ getLabel(qp.QP_TRANSFERS) | translate}}</p>
Other option could be to use the ng-init directive to initilize the full string Key once into a variable and then use the translatefilter against that variable, something like this:
<p
ng-init="LABEL = 'myquotes.packages.label.SEARCH.' +
(qp.QP_TRANSFERS === '1' ? 'TRANSFER' : 'NOTRANSFER')">
{{ LABEL | translate}}
</p>

Related

Ng-Zorro select not showing selected items with NgModel

I am using Ng-Zorro's multiple select, which is in a drawer. When opening the drawer, I give the select element a list of options and a list of items that are already chosen. The list of options to pick from works fine, but the already selected items do not show. This can be seen here as well: StackBlitz
The code:
<nz-select [(ngModel)]="selectedAttributes"
[nzMaxTagCount]="3"
[nzMaxTagPlaceholder]="attributeTagPlaceHolder"
nzMode="multiple"
name="changeAttributes"
id ="changeAttributes"
nzPlaceHolder="Please select">
<nz-option *ngFor="let attribute of allAttributes" [nzLabel]="attribute.name" [nzValue]="attribute"></nz-option>
</nz-select>
<ng-template #attributeTagPlaceHolder let-selectedList> "and " {{ selectedList.length }} " more items" </ng-template>
where the allAttributes list is formatted like this:
allAttributes= [
{
"id": 1,
"name": "Mask"
},
{
"id": 2,
"name": "Intensive"
},
{
"id": 3,
"name": "Family"
},
{
"id": 4,
"name": "Isolation"
}
];
and where the selectedAttributes is one or more of the items in the allAttributes list:
selectedAttributes= [{"id": 1,"name": "Mask"}];
No matter how I create or format the selected attributes list (it can be straight from the allAttributes list), the placeholder cannot be seen and the select is empty, plus when picking all options, the nzMaxTagPlaceholder shows there is an extra item picked.
Can anyone show me the way to set the selected items dynamically?
Try sth like below.
selectedAttributes = [this.allAttributes[0]];
Since
{"id": 1,"name": "Hapnikumask"}
is a complex object its equality will be checked by references. So you are defining a new object as selected it will be different from the source object.
use compareFn in your nz-select like this.
<nz-select
[(ngModel)]="selectedValue"
[compareWith]="compareFn"
(ngModelChange)="log($event)"
nzAllowClear
nzPlaceHolder="Choose"
>
in typescript file:-
compareFn = (o1: any, o2: any): boolean => (o1 && o2 ? o1.id === o2.id : o1 === o2);

Angular 2 - Interpolation for NGX-Charts Results within ngFor

I'm trying to show charts based on some json. I made a pipe to access the various parts of the json object but don't know how to use the data, which looks like this:
[ { "name": "Completed", "value": 50 }, { "name": "Remaining", "value": 50 } ]
within the ngFor.
So normally I would do something like this:
<ngx-charts-advanced-pie-chart
mdTooltip="Click to change unit"
[tooltipDisabled] = "true"
[scheme]="colorScheme"
[results]="results" <----this is where the results normally go
[gradient]="gradient"
[view]="view"
(select)="onChartClick()"
>
</ngx-charts-advanced-pie-chart>
And I want to try something like this:
<div *ngFor="let chair of targetChairs | chairDimensions">
<ngx-charts-advanced-pie-chart
mdTooltip="Click to change unit"
[tooltipDisabled] = "true"
[scheme]="colorScheme"
[results]="{{ chair.value.data.height | json }}"
[gradient]="gradient"
[view]="view"
(select)="onChartClick()"
>
</ngx-charts-advanced-pie-chart>
</div>
This doesn't work but is there a way to achieve this?
So I found a similar issue on a git page here which solved my problem, so here is what I used in case someone else has this problem:
<div *ngFor="let chair of targetChairs | chairDimensions">
<ngx-charts-advanced-pie-chart
mdTooltip="Click to change unit"
[tooltipDisabled] = "true"
[scheme]="colorScheme"
[results]="chair.value.data.feet"
[gradient]="gradient"
[view]="view"
(select)="onChartClick()"
>
</ngx-charts-advanced-pie-chart>
</div>

Get the value of a JSON array with _attribute

I have a strange looking JSON file (I think?) generated from elasticsearch.
I was wondering if anyone know how I could retrieve the data from a JSON object looking like this:
u'hits : {
u'hits : [{
u'_score' : 2.1224,
u'_source' : {u'content': u'SomethingSomething' }
}],
u'total: 8 }
u'took: 2 }
I can retrieve the total by writing {{ results.hits.hits.total }}, however, the underscore symbol (_) in front of the attribute name "_score" makes it impossible to retrieve the value of that attribute.
Any suggestions?
Try:
{{ results.hits.hits[0]._score }}
{{ results.hits.hits[0]._source }}

Angularjs Display single element from json

I have a json file which contains different prices for a service, depending on the day of the week (in the weekend it's more expensive)
I use angular to show these prices using a lines like this:
<div ng-repeat="arr in arrangementen | filter:'_1'" >Mon-Fri: € {{arr.prijs_ma_vr | number :2 }} </div>
<div ng-repeat="arr in arrangementen | filter:'_1'" >Sat: € {{arr.prijs_za | number :2 }} </div>
json:
{
"id": "_1",
"arrangement": "Vriendinnendag",
"prijs_ma_vr": 99.95,
"prijs_za": 103.95,
"prijs_zo": 104.95,
},
{
"id": "_2",
"arrangement": "Vipdag",
"prijs_ma_vr": 199.95,
"prijs_za": 205.95,
"prijs_zo": 209.95,
}
I wonder if there is more smart and easier way to display these prices or other elements from this json. Sometimes I just want to display one element (i.e. one price)
(Example in this site: wellness example
I would rework the json and do it this way:
{
"id": "_1",
"arrangement": "Vriendinnendag",
"prijs":[ 99.95, 103.95, 104.95 ],
“day”:['Mon-Fri','Sat','Sun']
},
{
"id": "_2",
"arrangement": "Vipdag",
"prijs":[ 199.95, 203.95, 204.95 ],
“day”:['Mon-Fri','Sat','Sun']
}
<div ng-repeat="arr in arrangementen | filter:'_1'" >
day[0] € {{arr.prijs[0] | number :2 }}<br>
day[1] € {{arr.prijs[1] | number :2 }}<br>
day[2] € {{arr.prijs[2] | number :2 }}
</div>
I see you already accepted the other answer, but I wanted to give you another option, which is to create your own filter.
angular.module('demo',[])
.controller('MainCtrl', ['$scope', function($scope){
$scope.arr = [{ "id": "_1",
"arrangement": "Vriendinnendag",
"prijs_ma_vr": 99.95,
"prijs_za": 103.95,
"prijs_zo": 104.95, },
{ "id": "_2",
"arrangement": "Vipdag",
"prijs_ma_vr": 199.95,
"prijs_za": 205.95,
"prijs_zo": 209.95, }];
}])
.filter('weekdayPrice', function(){
return function(obj, id) {
var rtnval;
angular.forEach(obj, function(value){
if (value.id === id) {
return rtnval = value.prijs_ma_vr;
};
});
return rtnval;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo" ng-controller="MainCtrl">
<div>Weekday Price: {{arr | weekdayPrice: '_2' | number: 2 | currency: '€'}}</div>
</div>
So this custom filter takes an id and returns just the weekday price from the object whose id matches the id you passed into the filter. You can use it just like any other filter so you can chain them together just like the built in filters, allowing you to add additional filters such as currency or number to the value that is returned by the custom weekday filter.
The benefits are that you can reuse your custom filters throughout your application; you don't have to change your current json format; and more importantly, you don't have to figure out the array index of the item which is definitely prone to errors.

Multi-line attribute values in HAML

I am using KnockoutJS which uses a json string within the data-bind attribute to indicate binding information. I also like using HAML.
This string can quickly become quite long, for example:-
%ul#task-list.unstyled{"data-bind" => "template: { name : 'taskHierarchy', foreach : contexts.children(), afterAdd: function(elem) { $(elem).hide().slideDown() } }"}
A solution is to use the :plain filter as follows (slightly different from above):-
:plain
<div data-bind = "template: {
name: 'twoLineResourceTemplate',
foreach: resources,
afterAdd: function(elem) { $(elem).hide().slideDown() }
}">
</div>
Is there a neater way to do this using HAML constructs instead of the filter?
I have tried using the pipe character but it does not seem to work for HAML attributes.
Thanks!
I tried the pipe notation and it works for me:
%ul#task-list.unstyled{"data-bind" => |
"template: { " + |
"name : 'taskHierarchy'," + |
"foreach : contexts.children()," + |
"afterAdd: function(elem) {" + |
"$(elem).hide().slideDown()" + |
"} }"} |
You could try this post on KnockoutJS and Unobtrusive JavaScript