In angular 2 I want to loop through an array and show options in drop-down on the basis of some conditions. According to my search I can place a condition in ng-container directive above loop. How can I do that inside loop. (Please note that If I place what inside loop a blank space will be shown instead of option).
Thanks!
<md-autocomplete #package="mdAutocomplete" [displayWith]="displayPackage">
<md-option (onSelectionChange)="packageSelection($event, package) *ngFor="let package of (reactivePackages | async)"" [value]="package">
{{ package.packageName }}
{{package.serviceId}}
{{service.serviceId}}
</md-option>
</md-autocomplete>
You can loop through the array using ng-container and can use ngif on md-options like this:
<md-autocomplete #package="mdAutocomplete" [displayWith]="displayPackage">
<ng-container *ngFor="let package of (reactivePackages | async)">
<md-option (onSelectionChange)="packageSelection($event, package)" [value]="package" *ngIf="your-condition" >
{{ package.packageName }} {{package.serviceId}} {{service.serviceId}}
</md-option>
</ng-container>
</md-autocomplete>
Hope this helps.
Related
I am applying translation in vue 2.x and I am using "vue-gettext" but I am having a problem in some cases eg:
<settings-group label="is a label" >
<settings-field label="is a label">
In those cases I can't find a way to translate the label, I was looking for info and there is nothing, but maybe someone here could solve it...
Things I tried:
<settings-field v-translate label="is a label">
Doesn't work
<settings-field label="{{<translate>is a label</translate>}}">
Throw an error: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use <div :id="val".
thank you.
First option (preferred, since in vue3-gettext translate tag would be eventually removed):
<settings-group :label="$gettext('is a label')" />
Second option -- create slot label in settings-group component. Could be useful if you going to interpolate string based on some data from settings-group
# settings-group.vue
<div class="settings-group">
<span class="label">
<slot name="label" v-bind="{ count }" />
</span>
...
# pages/settings.vue
<settings-group>
<template v-slot:label="{ count }">
<translate
:translate-n="count"
:translate-plural="%{count} elements"
:translate-params="{ count }"
>
%{count} element
</translate>
</template>
</settings-group>
I am trying to get values for the b-form-select from an array inside the array but not able to get it.
I have a code like this:
<span v-for="(user, index) in Users" :key="index">
<span v-for="(userName, index) in user.details" :key="index"> {{userName.name}}</span>
</span>
I am getting the user name here, but I want to display it inside an b-form-select.
I have a code for the b-form-select but it is not helping.
<b-form-select
v-model="user_name"
>
<option
:value="userName.id"
v-for="userName in Users.details"
:key="userName.id"
>{{ userName.name }}
</option
>
</b-form-select>
ANy solution to it?
Your code on top is iterating over user.details from a Users array while the second code block is iterating over Users.details. Do you spot the difference? If you want to iterate over all details you'd need to collect them from Users first. For example,
const details = Users.map(user => user.details)
Or else grab the user you want from Users and iterate over user.details the same way as you do in the spans.
I have tried / guessed at every combination of v-bind/v-model/:checked/:value I can think of, but I can't get these damn checkboxes checked on load:
Using Vue Material / Vue3:
<div v-if="items.length">
<div
v-for="(value,key,index) in this.items"
:key="index"
:ref="'icon'+items[key].id">
<md-checkbox
:id="'TDS'+key"
v-model="items[key].complete"
true-value="1"
#change="doDo(items[key].id)"
class="md-primary m-0"
>
{{ items[key].item }} {{items[key].complete}}
</md-checkbox>
</div>
</div>
The bit I can't figure out is how to make the checkbox checked if items[key].complete=1 when data is loaded.
You are already inside the loop
v-model="value.complete"
Same goes for all other bindings.
And your data should not be accessed with this in your template
v-for="(value,key,index) in items"
This one should already work, if you receive your data properly, it may update itself due to reactivity. Maybe try v-model="!!items[key].complete" just to be sure that your value is coerced to a Boolean.
This code works but is there a way to consolidate these two conditions and outputs into one line of code?
<img v-if="pointshover" :src="pointshover" :key="pointshover" class="leaderimg">
<img v-if="!pointshover" :src="leaderPoints[0].playerimg" :key="pointshover" class="leaderimg">
Basically if 'pointshover' is null then it grabs the image src from leaderPoints[0].playerimg. If 'pointshover' is not null then it is the src.
Option 1
Then as you want to use only one line, going with the solution proposed by #choasia with a small change.
<img :src="pointshover ? pointshover : leaderPoints[0].playerimg" :key="pointshover" class="leaderimg">
You won't need the v-if as this image is shown always, and it will have the pointshover src only when it exists and the leaderPoints[0].playerimg when it doesn't.
Option 2
If you go with the two lines code you probably should use:
<img v-if="pointshover" :src="pointshover" :key="pointshover" class="leaderimg">
<img v-else :src="leaderPoints[0].playerimg" :key="pointshover" class="leaderimg">
It's clearer what you want to accomplish if you use an else.
Option 3
You could use a computed property to bind the src.
<img :src="myImageSource" :key="pointshover" class="leaderimg">
myImageSource(){
return this.pointshover ? this.pointshover : this.leaderPoints[0].playerimg;
}
You can use JavaScript expressions in :src.
<img v-if="pointshover" :src="pointshover ? pointshover : leaderPoints[0].playerimg" :key="pointshover" class="leaderimg">
Hot to find in dojo element when I know id of parent and I know type and style class of element which I looking for ?
For example, I want find and change (span style=tabLabel) ALARMS into Mga alarma
<div dojoattachpoint="focusNode" role="tab" style="-moz-user-select: none;" id="tab_div_tablist_dijit_layout_ContentPane_1" tabindex="-1" title="" aria-selected="false">
<img dojoattachpoint="iconNode" class="dijitIcon dijitTabButtonIcon dijitNoIcon" alt="" src="dojoroot/dojo/resources/blank.gif">
<span class="tabLabel" dojoattachpoint="containerNode" style="-moz-user-select: none;">Alarms</span>
<span role="presentation" dojoattachevent="onclick: onClickCloseButton" dojoattachpoint="closeNode" class="dijitInline dijitTabCloseButton dijitTabCloseIcon" style="display: none;">
<span class="dijitTabCloseText" dojoattachpoint="closeText">[x]</span></span>
</div>
In this case it is pretty easy. If you look at the span element you refer to it has a dojoattachpoint attribute specified. That means that the node can be accessed from the widget directly with that name.
Now I assume that the widget is called "tab_div_tablist_dijit_layout_ContentPane_1" from the id in your code so to get the widget:
var widget = dijit.byId("tab_div_tablist_dijit_layout_ContentPane_1");
And the dojoattachpoint on the span has the value containerNode so:
widget.containerNode.innerHTML = "Mga alarma";
I think that should work.
If you're creating a custom widget template and wish to localize a string, there is a mechanism to do this. Simply use a substitution pattern like ${alarm} and define a javascript property on your widget with that name. That property can then be populated with a localization bundle using dojo.i18n. You can look at some of the dijits like dijit.Dialog.postMixInProperties to see how this is done.