Previous Question I raised
Hi, above is a question i asked in stack overflow. As a follow-up of that questions, if I am trying to use the ui-view to identify the lists and details.
How can I track which ion-item I have clicked / currently active in order to show the relevant detail on the right side?
Please give me some suggestions and directions about that! I have already struggling with the same page for a week... Thank you so much!
http://ionicframework.com/docs/api/directive/ionList/
<ion-list>
<ion-item ng-repeat="item in items track by $index" ng-click=clickedItem(item)>
</ion-item>
</ion-list>
Now in controller
$scope.clickedItem = function(item){
//do stuff here
}
You can do this by $index like,
<ion-item ng-repeat="item in items track by $index" ng-click=clickedItem($index)>
But It is not godd solution because, If we sort list or search items list, the index value will be changed. So, pass the item to the function.
Related
I have array of buttons buttons = [1,2,3,4,5,6] which is diplayed in a row
<ion-row>
<div *ngFor = "let button of buttons" class="buttons">
<button ion-button>{{button}}</button>
</div>
</ion-row>
My requirement is the array buttons look like stepper i need
Yes, you can , please take a look at this stackblitz.
But i advice you to add a dynamic id and name for every button, using index, otherwise you will have a lot of problems
I have created a dialog with a list of options(users) which can be selected, using mat-selection-list. I have a use case where I should disable the list of already selected users from getting selected/clicked again.
So, I get the selected users from the event, add a flag to know if the user has already been selected or not, and disable the mat-list-option based on the returned boolean value from the flag which I have. Here is the code for that.
<mat-selection-list
#listItem
(selectionChange)="handleSelection($event, listItem.selectedOptions)">
<mat-list-option
*ngFor="let item of filteredArray"
[value]="item"
[disabled]="item.isSelected">
{{getDisplayValue(item)}}
<mat-divider></mat-divider>
</mat-list-option>
</mat-selection-list>
Now, the problem is, I want to show a tick mark for the already selected users as well since mat-list-option has a mat-checkbox child element.
So when i disable the mat-list-option(parent) , it also adds class mat-psuedo-checkbox-disabled to the checkbox(child) as well. I want to prevent this from happening.
Or suggest me an efficient way to override the mat-checkbox class and add checked class to it, even if the mat-list-option has disabled class added to it.
Any help is appreciated, Thanks.
UPDATE:
Solved it by adding mat-list-option selected property to that. How stupid was i to miss that.Lol.
<mat-list-option *ngFor="let item of filteredArray" [value]="item" [disabled]="item.isSelected" [selected]="item.isSelected">
Able to solve this with a help of my colleague.
i wasn't looking at the right place.
I am using ionic 3. I am trying to do a list of events where the event name is on the left side and the event note (the start time) is on the right side of the item in an ion-note. Here is my code:
<ion-list *ngIf="events.length !== 0">
<ion-item-group>
<ion-item-divider>
Upcoming events
</ion-item-divider>
<button ion-item *ngFor="let event of events" (click)="itemTapped($event, event)">
{{event.name}}
<ion-note item-right>{{event.start | date: 'HH:mm'}}</ion-note>
</button>
</ion-item-group>
</ion-list>
If I do just that, the note gets displayed on the right properly, however the primary text (the event's name) gets chopped off with an ellipsis inserted in the end, even though it would fit just fine. Here's a picture:
I have checked the documentation on ionic's website, and I copied over the demo source from here: https://github.com/ionic-team/ionic/blob/master/demos/src/list/pages/page-one/page-one.html
Funny enough, it looks good in their showcase but pasted into my application it looks just as off as my example.
The question is: how do I make ionic not cut off the primary text in my list?
Thanks.
**UPDATE: **I have found the solution. I have added a css rule (min-width:75%) for ion-notes in an scss associated with a different page, but that somehow got applied to this page as well. Removing that CSS rule fixed the issue for me.
In your code you're using item-right class, however in the documentation as well as the demo source page, it is item-end.
Please check the item placement attributes here:
https://ionicframework.com/docs/api/components/item/Item/
If that doesn't help, you can try overriding the padding-right attribute of item-content.
I have an HTML template, details.html, that includes this:
<ion-card>{...first card on page...}</ion-card>
<ion-card [hidden]="showColorBool">
<ion-card-header>
Select a color
</ion-card-header>
<ion-card-content>
<!-- buttons should go here -->
</ion-card-content>
</ion-card>
<ion-card>{...next card on page...}</ion-card>
I need to add the buttons as indicated above. They will be will be styled according to values contained in the details array I have stored in local storage like this:
<button ion-button color={{data[index][color]></button>
I am able to access the arrays and values I need from storage like this in my details.ts:
arr.then( data => {
console.log(data);
for ( let index in data ){
console.log(data[index][color]);
}
});
1) The number of buttons is always dynamic (0-10).
2) The "color" value is needed to set the color value of the buttons.
3) I can't not put this functionality in it's own component/page. It needs to be on the page with the other cards.
Any idea on how I might accomplish this? I have been through the docs and SO for everything I could find. Couldn't really find much on this dynamic stuff.
ngFor is what you are after.
ngFor directive: https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html
The ngFor directive allows you to loop through an array in the template.
details.html
<button *ngFor="let item of data" ion-button color="{{item[color]}}"></button>
I am using Ionic 2.
I have a list of items, where I use <ion-item-options>. They work perfectly as documented here.
When a user slides the item to the left, the options are exposed.
Question
Is it possible to add that when the user long presses on the item, it also exposes the options?
Thanks
<ion-list>
<ion-item-sliding...
<ion-item...
.........
</ion-item>
<ion-buttons>
<button light (click)="alert('todo')"><ion-icon class="ion-ios-heart"></ion-icon>Favourite</button>
</ion-buttons>
</ion-item-sliding>
</ion-list>
The longer press (as said by it's name) can be called on by using (press) instead of (click). This way you can call a function when the ion-item has been pressed and toggle a boolean.
Next in your ion-item-options you can set an *ngIf="yourBoolean" and your options will be toggled