I'm new in Nativescript.And how I call javascript function when binding? I try try like method below, but get empty result.
<Repeater items="{{ Match }}">
<Repeater.itemTemplate>
<StackLayout>
<Label text="{{ SubStringMatch(MatchNo) }}" />
<Label text="{{ DateTime }}" />
</StackLayout>
</Repeater.itemTemplate>
</Repeater>
function SubStringMatch(value) {
return value.substring(1);
}
exports.SubStringMatch= SubStringMatch;
From the code you posted, I believe, you are trying to convert a number value into a string. This could be achieved by using a converter function. You can read more about it in {N} documentation.
Related
I try out Svelte Native and I try to hide "tags" with booleans. I try this, which works in the normal Svelte framework like:
{#if po.id !== null || po.id !== undefined}
<flexboxLayout flexWrap="wrap" class="v-a-c t-a-c" >
<label text="first" width="70%" backgroundColor="#63c3d0" class="m6"></label>
<label text="second" width="70%" backgroundColor="#63c3d0" class="m6"></label>
<label text="third" width="70%" backgroundColor="#63c3d0" class="m6"></label>
</flexboxLayout>
{:else }
<stackLayout flexWrap="wrap" class="v-a-c t-a-c">
<textField bind:text="{personName}" class="m6 new-person" ></textField>
<button text="add new value" on:tap="{createNewPlayer}" />
</stackLayout>
{/if}
So why it doesn't work? What am I doing wrong?
Why does this following code produce this result: https://imgur.com/a/lQhLs8o ?
However, if I move the BottomNavigatorBar component to top position before CountryListComponent, it produces the desired result that looks like this: https://imgur.com/a/23z7bb2 ?
<template>
<Page actionBarHidden="true">
<DockLayout height="100%">
// first
<CountryListComponent dock="top">
// second
<BottomNavigationBar dock="bottom" activeColor="pink"
inactiveColor="yellow"
backgroundColor="black"
verticalAlignment="bottom"
#tabSelected="this.changeTab"
row="1">
<BottomNavigationTab title="Fiaarst" icon="icon-29.png" />
<BottomNavigationTab title="Second" icon="icon-29.png" />
<BottomNavigationTab title="Third" icon="icon-29.png" />
</BottomNavigationBar>
</DockLayout>
</Page>
</template>
CountryListComponent
<template>
<StackLayout backgroundColor="blue">
</StackLayout>
</template>
Refer the DockLayout documentation, by default stretchLastChild will be true which means BottomNavigationBar will take entire space if it's last child and vice versa.
If I try to create conditions in my v-template like if="transaction.id == 604" I get the following error:
>System.err: Calling js method getView failed
System.err:
System.err: TypeError: Cannot read property 'scopedFn' of undefined
If I set it to if="transaction.id" it works fine. transaction.id exists and it has a value of 604.
<ListView for="transaction in transactions" itemTap="onItemTap" height="80%" >
<v-template if="transaction.id">
<StackLayout>
<Label :text="transaction.id" className="placeName" />
<Label :text="transaction.amounttxt" className="placeName" />
<Label :text="transaction.insight_text" className="placeName" />
</StackLayout>
</v-template>
</ListView>
You have only one template with an if condition. There is no fallback template when the if condition fails. There should at least one template without if so it can be used when all your if conditions on other templates fail. Or at least one of you if should pass.
If you want to ignore any list item from being rendered, you should filter the array (transactions) itself.
If I use <Label text="Welcome {{ username }}" /> no username appears.
Literally "Welcome {{ username }}" is visible - plaintext appears.
However using just <Label text="{{ username }}" /> works as intended, the username is passed.
I can work with this but am wondering if this is normal and if I'm doing it wrong.
Using plain JS with NativeScript, not angular or typescript.
This won't work:
<Label text="Welcome {{ username }}" />
It should be: <Label text="{{ 'Welcome ' + username }}" />
how to make a radautocompletetextview with prefilled using nativescript-angular?
This is how i am trying to do it:
HTML:
<RadAutoCompleteTextView id="rice-cake" (didAutoComplete)="onTokenSelected($event)" marginTop="40px" style="border-width:0.5;border-radius:5px;border-color:#E6E6E6;"
#autocmp [items]="dataItems" suggestMode="Suggest" displayMode="Plain">
<SuggestionView tkAutoCompleteSuggestionView suggestionViewHeight="150">
`enter code here`<ng-template tkSuggestionItemTemplate let-item="item">
<StackLayout orientation="vertical" padding="10">
<Label [text]="item.text"></Label>
</StackLayout>
</ng-template>
</SuggestionView>
</RadAutoCompleteTextView>
TypeScript:
this.autocomplete =
<RadAutoCompleteTextView>view.getViewById(this.page,"rice-cake");
console.log(JSON.stringify(this.autocomplete))
var token = new TokenModel(_result.dish, undefined);
this.autocomplete.addToken(token)
You may want to check this out:
https://github.com/telerik/nativescript-ui-feedback/issues/323