I'm developing an mobile application using ionic. In this I'm trying to implement the delete feature like this :
As we see there is icon on left-side of the every list item, when clicked on that icon, list transitions to left-side and delete button gets displayed on the screen.
I want to implement the same feature..But not able to write the right CSS. Please guide me how should I make this work.
Here is the link to my plunkr
You can use ionic list directive.
<ion-list ng-controller="MyCtrl"
show-delete="shouldShowDelete"
show-reorder="shouldShowReorder"
can-swipe="listCanSwipe">
<ion-item ng-repeat="item in items"
class="item-thumbnail-left">
<img ng-src="{{item.img}}">
<h2>{{item.title}}</h2>
<p>{{item.description}}</p>
<ion-option-button class="button-positive"
ng-click="share(item)">
Share
</ion-option-button>
<ion-option-button class="button-info"
ng-click="edit(item)">
Edit
</ion-option-button>
<ion-delete-button class="ion-minus-circled"
ng-click="items.splice($index, 1)">
</ion-delete-button>
<ion-reorder-button class="ion-navicon"
on-reorder="reorderItem(item, $fromIndex, $toIndex)">
</ion-reorder-button>
</ion-item>
</ion-list>
Controller:
app.controller('MyCtrl', function($scope) {
$scope.shouldShowDelete = false;
$scope.shouldShowReorder = false;
$scope.listCanSwipe = true
});
Related
<ion-icon id= "list" name="list-sharp" onclick = "appear()"></ion-icon>
<ion-card id = "popup">
//other stuff
</ion-card>
appear(){
document.getElementById("popup").style.visibility = "visible";
}
The first part is in html the appear method is in typescript, and whenever i click on my list icon it gives me an error and says appear is not defined, anyone know why this is.
This is a circular menu. In the options to open with the touch on the floating button but I get :
ERROR TypeError: Cannot read property 'getElementById' of undefined
when I run my code. Also the menu is already open when I load this page. I want it to be closed and open when it's clicked on.
<a class="floating-btn" (click)="document.getElementById('circularMenu1').classList.toggle('active');">
<a><ion-icon name="menu"></ion-icon></a>
</a>
<menu class="items-wrapper">
<ion-icon name="home"></ion-icon>
<ion-icon name="person"></ion-icon>
<ion-icon name="heart"></ion-icon>
<ion-icon name="help"></ion-icon>
</menu>
</div>
please use this approach
in html
<a class="floating-btn" (click)="toggleMenu()">
<a><ion-icon name="menu"></ion-icon></a>
</a>
<menu [ngClass]="{'active': isOpen}">...</menu >
in ts
isOpen = false; // set it to false initially
toggleMenu(){
isOpen = !isOpen; // toggle it as you want
}
From your code, I'm unable to find the ID which you have mentions in that click event. Btw this is not a good practice to use en angular. As a solution, for the click event, you can call a function in the controller and set a variable based on the condition. Then after you can use NgClass property binging in order to close or open the menu.
Here is the reference for NgClass property.
I have a JSON Parse in my project and its work fine
let data:Observable<any>;
data = this.http.get(API);
data.subscribe(result => {
this.items = result;
this.saveData();
});
HTML:
<ion-card *ngFor="let item of items">
<ion-card-content id="{{item.id}}">
....
....
</ion-card-content>
</ion-card>
Now I want a 'Favorite' function.
I have an icon with a click event.
How I do, that when anyone clicks on the icon he add the specific card to his favorites and he can show his favorites on another page?
I am trying to run my ionic app with xcode by doing:
ionic package build ios
ionic cordova prepare
Then I open up xcode and do Clean and Run. When on the device the scrolling acts like this:
My HTML looks like this:
...
<ion-content no-padding>
<div (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')">
<div class ='contentone' [#moveList]='moveState'>
<ion-list class="marginstatus" no-padding>
<ion-item class="changepadding" *ngFor="let z of items ; let i = index" (click)='expandItem(i)' id='{{i}}' #feedstyle text-wrap>
<div class="flex" #flex>
<div class="nonzoomimage">
<img class="imagepost" src="{{z.pic}}">
</div>
<div class="descholder">
<div class='description'>{{z.description}}</div>
<div class='link'>{{z.link}}</div>
</div>
</div>
<div class="feedtoptextcontainer" #feedtop>
<div class="imageparent">
<img class="postprofilepic" src="{{z.pic}}">
</div>
<div class="usernamecontainer">
<h4 class="postusername">Ed Bundy</h4><br>
<h4 class="poststudio">Ed's Studio</h4>
</div>
<div class="postprofilelink">
<div class="book">Book</div> #edbundyhair
</div>
</div>
<img class="imageposttwo" #imagepost src="{{z.pic}}">
</ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="$event.waitFor(doInfinite())">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</div>
</div>
</ion-content>
...
My doInfinite function, of ion-infinite-scroll looks like this, it is empty, just a placeholder right now - it does nothing:
doInfinite(): Promise<any> {
console.log('Begin async operation');
return new Promise((resolve) => {
setTimeout(() => {
resolve();
}, 500);
})
}
It just glitches when you try to scroll - and doesn't scroll at all, doInfinite fires because I can see the log message.
Ionic by default uses the Ionic scroll, which simulates the Momentum Scrolling as seen on the iOS devices, by adding the overflow-scroll=true attribute, it will basically use this particular ion-content to use the native scrolling (if you want a global effect check out the following link.
http://ionicframework.com/docs/v1/api/provider/$ionicConfigProvider/
Please also check if css classes are affecting the style of the element!
Is it only doing the bug when you scroll upwards? If yes, try to check this:
ion-infinite-scroll fires when scrolling up - Ionic
Can you try to start with and build something simple like this?
<ion-infinite-scroll (ionInfinite)="fetchMore($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
and on your .ts
fetchMore(event) {
console.log('Begin fetching more data');
setTimeout(() => {
console.log('Async operation has ended');
event.complete();
}, 500);
}
Not sure why your code would cause that glitch but if you happen to make something simple as this work, you'll find out what causes the bug as you build it back up to what you have.
Could be that the $event.waitFor() still has its issues. If you need to wait for a promise like when you're fetching more data. you can have something like this.
fetchMore(event) {
this.fetchingDataService.fetchPromise().then(
(moreData) => {
//append moreData
event.complete();
},
(err) => {
//do something with error
event.complete();
}
);
}
Found the problem. After upgrading to Ionic 3, at least in my case, the swipe event on an ion-list in an ion-scroll freeze my scroll.
<ion-scroll scrollY="true">
<ion-list padding (swipe)="someThing($event)"> <!-- There, swipe, removing it make my ion-scroll scrollable again -->
<ion-item>
<p>1</p>
</ion-item>
....
<ion-item>
<p>9999</p>
</ion-item>
</ion-list>
</ion-scroll>
I am developing app in Ionic 2, and I want to display map in a modal. Problem is I can't get it to work. Same code works on normal page, but not in modal. I tried using web version of google maps API and even native cordova plugin, but result is the same, blank map in modal, working map on page. Any advice how to solve this?
You should set the underneath page to transparent.
Here is my working code for calling map modal
html
<ion-content [style.opacity]="isModal ? 0 : 1" padding>
<button ion-button item-right >
<ion-icon name="add" (click)="getLocation()"></ion-icon>
</button>
</ion-content>
typescript
getLocation() {
this.isModal = true;
let mapModal = this.modalCtrl.create(MapModalPage);
mapModal.onDidDismiss((data) => {
this.isModal = false;
if(data) {
this.location = data.location;
this.locImage = data.image;
}
});
mapModal.present();
}