I've got a page with a list view:
<ListView items="{{ tasteList }}" visibility="{{tasteList.length> 0 ? 'visible' : 'collapse'}}">
I'm trying to check the length of tasteList and toggling the visibility so the list view is only rendered if there are items in it, and I'm rendering a different layout in that case:
<StackLayout visibility="{{tasteList.length = 0 ? 'visible' : 'collapse'}}">
In my test case, there are 3 items returned. With the above code, on initial page load the list is not visible and my StackLayout appears. if I navigate away from the page and come back, the listview IS displayed (as long as I don't empty the viewmodel0.
If I remove the condition and just make the listview visible all the time, the page loads the listview and the three items as expected.
It seems that the condition is checked before the view model is actual loaded and not updated subsequently. When I put <Label text="{{ tasteList.length }}" /> at the top of the page
I see "0" for about 1 second and then it switches to "3" but the visibility isn't toggled on my ListView/StackLayout.
What am I doing wrong?
You are suppose to use == or === on the expression (conditional statement for visibility) and more importantly you should mention the attribute before the expression, the one that should trigger change upon update.
Example
<StackLayout visibility="{{ tasteList.length, tasteList.length === 0 ? 'visible' : 'collapse'}}">
From docs, Using expressions for bindings
Related
I'm dealing with an application that contains code along these lines:
<v-col
v-for="(publication, pubIndex) in publications"
:key="'selected_' + pubIndex"
class="col-3"
>
<v-card
height="100%"
class="flexCard"
>
<v-card-title
class="white--text"
:class="{'grey': !publication.isCitation, 'green': publication.isCitation}"
>
<!-- card content -->
<v-switch
v-model="publication.isCitation"
color="green"
label="Use as citation?"
/>
...
If, when the page is mounted, the objects in publications do not contain an isCitation parameter then this switch correctly binds to it; toggling the switch adds the parameter as "true" and toggling it again sets it to false. The card changes colour as it should.
But, if the page is mounted with isCitation already present the card is rendered in the correct colour for whether it's true or false, and the switch is in the correct position, but toggling the switch does not change anything.
Can anyone suggest what might be going wrong here?
The answer turned out to be the following:
Removing v-model from the v-switch and replacing with this:
:input-value="publication.isCitation"
#change="toggleCitation(pubIndex)"
Adding this function in methods:
toggleCitation(index) {
let pub = this.publications[index];
pub.isCitation = !pub.isCitation;
this.$set(this.publications, index, pub);
},
Bottom of page imperiyanews
Where is div and table with dinamical id
Them look like <div id="ZzRwXzE3NzMwXzE1MzY5NDQ0MDA" data-ids="1587700,1586609,1586068,1587550,1587700,1586609,1587550,1586068,1586068,1588089,1588041,1587131"><table id="ZzRwXzE3NzMwXzE1MzY5NDQ0MDA_table_17730"
I tried to filter them out by rules like
www.imperiyanews.ru##table[id$="A_table_17730"]
www.imperiyanews.ru##[class^="Z"]
www.imperiyanews.ru##[id^="Z"]
www.imperiyanews.ru##.b-block.block > div > div:nth-of-type(3)
But rules didnt work for me.
In element picker mode - these rules hilighted right element, but after reload page - element not filtered
I could not solve the below question for Nativescript, and have google search, and try many different ways.
<lv:RadListView items="{{ data }}" >
<lv:RadListView.itemTemplate>
<StackLayout>
<TextField text="{{ data1 }}" />
<TextField text="{{ data2 }}" />
</StackLayout>
</lv:RadListView.itemTemplate>
</lv:RadListView>
Question
If the user key in the above 10 different index TextFields of data1 and data2 in the itemTemplate,
how to get the 10 different index TextFields of data1 and data2 ?
Appreciate anyone who could help to solve the above question. Thank you.
As far as I understood your question you need to know the which item is tapped/ selected based on the index and this way have access to the specific bound values.
If that is the case you can use ListViewEventData and access the unique item index for each tapped or selected item. Basic example demonstrating using the index to apply different styles can be found here - based on this approach you can access the index of the tapped item on itemTap event
In RadListView, is it possible to scroll to a specific y-position.
The problem is if I navigate to another page from a RadListView page and then come back - it initializes to the top of the listview. I would prefer to the same y position the user was at before navigating to another page.
I think there's a scroll-to-item method - but that's not necessarily the same y position.
You can cache your index using observable ViewModel and pass it when needed (in this case on the loaded event for your list - that is when the users will return back to the list page and the list will load)
e.g. TypeScript
page.ts
export function onListLoaded(args: RadListwModule.ListViewEventData) {
list = <RadListwModule.RadListView>args.object;
if (list.items) {
list.scrollToIndex(roversViewModel.get("cachedIndex"));
}
list.refresh();
}
export function onItemTap(args: RadListwModule.ListViewEventData) {
var tappedItemIndex = args.itemIndex;
// "cache" the index of our tapped item
roversViewModel.set("cachedIndex", tappedItemIndex);
// navigate to details page or do what you want to do on itemTap
frame.topmost().navigate(navEntry);
}
page.xml
<lv:RadListView items="{{ dataItems }}" loaded="onListLoaded" itemTap="onItemTap">
Also give your cachedIndex initial value of 0 for the first time the list is loaded.
Example based on this POC app .
Note that is not exactly the same as scroll-to-the-exact-y-position but you can modify the logic and scroll further to the exact position with getting the cells relative position offset.
What I want to do here is that when my checkbox 'chBeamer' is checked the images of the beamers should appear if their beamername is not '/' (/ means that their is no beamer registrated)
checkbox
<input ng-model="chBeamer" type="checkbox" id="chBeamer" name="chBeamer"/>
ng-show
<div ng-show="chBeamer"><img id="beamer" src="../app/img/beamer.png"/></div>
I don't know how to start with this, I tried with a filter and condition (chBeamer !== '/') but this didn't work...
From your post I can't quite understand where beamername is coming from, but you can do:
<div ng-show="chBeamer && beamername !== '/'">...</div>
But I feel like this is part of a bigger picture, e.g. there must be multiple items? What does your underlying model look like?