Am new to Ionic framework (Hybrid application development) from iOS native app development. I have to design a screen which should have two button like "Recent and All". If we click "Recent" the recent items should be displayed in list and if we click the "All", it should display the all items in the list. Am trying to use the "ion-slides" control to use two different lists.
I have implemented the ion-slides in the html page inside the "ion-view", it is overlapping the two buttons (Recent, All buttons are overlapping and not clickable). If I add the "ion-slides" in "ion-content" or "div", the slides are not in visible. Also, I need to change the slides based on the button actions if I click the "Recent" button need to show the first slide. I have implemented the "ionicSlideBoxDelegate" but, it is not working. How can I fix this issue? Can you please help?
<ion-view view-title="Slide Box" ng-controller='homeViewController'>
<ion-content>
<div>
<button ng-click="nextSlide()">Recent</button>
<button ng-click="previousSlide()">All</button>
</div>
<div class="slide-wrapper1">
<ion-slides pager="false" options="sliderOptions">
<ion-slide-page>
<ion-content>
<h1>First Slide</h1>
</ion-content>
</ion-slide-page>
<ion-slide-page>
<ion-content>
<h1>Second Slide</h1>
</ion-content>
</ion-slide-page>
</ion-slides>
</div>
</ion-content>
</ion-view>
Am able see the log "Next Button clicked" but, the action is not performing.
.controller('homeViewController', function($scope, $ionicSlideBoxDelegate) {
$scope.nextSlide = function() {
console.log("Next Button clicked", $ionicSlideBoxDelegate);
$ionicSlideBoxDelegate.next();
//$ionicSlideBoxDelegate.$getByHandle('burgers').next();
}
$scope.sliderOptions = {
effect: 'slide',
pagination: false,
initialSlide: 0
}
})
It doesn't work inside the div. Keep it outside of the div it will work fine.
Related
I'm using ionic and angularJS in my application, I need to expand and collapse list view. As of now I created the list view using ion-list and ion-item without expand and collapse. Please find the code and snap below.
<ion-view view-title="Call Lists">
<ion-content class="padding">
<ion-list show-delete="false" can-swipe="true">
<div class="list card-ScheduledCalls">
<!-- Task # -->
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="item in callItems" type="item-text-wrap" ng-click="doTask()">
<img ng-src="{{item.imgSrc}}">
<h3>{{item.callCount}}</h3>
<h3>{{item.callDate}}</h3>
<p style="color:white;">{{item.callCmt}}</p>
<p style="color:white;">{{item.callType}}</p>
<p style="color:white;">{{item.assetType}}</p>
<p style="color:white;">{{item.requestedBy}}</p>
<p style="color:white;">{{item.issueType}}</p>
</ion-item>
</div>
</ion-list>
</ion-content>
</ion-view>
Now I have more details in the each list for eg: EmpName, BloodGroup, EmpTodayTaskName, TaskTime, TaskDuration, TaskComments, etc. First I will show only three fields in the list, If a user clicks the more button (mentioned in the image) I will show remaining details.
At the same time, I'm having tapping (ng-click) functionality to go next page so I restrict the user that If they select the more button only to do expand and collapse other touches it will move into next page.
How can I handle this activity in ionic and angular ?
If I understand this correctly, the app needs to go to the next page if the content inside of the ion-item is clicked. If so, why not to wrap ion-item content inside some container, for example div, and attach the required ng-click there
I am trying to disable click on ion-item for some items.
The code is something like this
<ion-item class="item (app.app_id==='isDivider')?'item-divider':'' no-border padding-20-10"
collection-repeat="app in apps"
item-width="(app.app_id==='isDivider')?5000:90"
item-height="(app.app_id==='isDivider')?70:105"
ng-click="(app.app_id==='isDivider')||listDetailsOfApps();item.clicked = true"
stop-event="click">
It is actually now not calling if app.app_id is isDivider but still clickable.
How to make it not clickable as it is header and should not be clickable
Put it inside a $scope function in your controller to detect and run other actions for clickable item:
Controller:
$scope.clickCheck = function(app){
if(app.app_id==='isDivider'){
//action for the divider. (should do nothing)
}else{
//action for the clickable item. (set item.clicked=true)
}
}
View :
Repeat item inside <div> tag and using ng-if:
<div collection-repeat="app in apps">
<ion-item ng-if="app.app_id==='isDivider'" class="item-divider no-border padding-20-10"
item-width="5000"
item-height="70">
<ion-item ng-if="app.app_id!=='isDivider'" class="no-border padding-20-10"
collection-repeat="app in apps"
item-width="90"
item-height="105"
ng-click="item.clicked=true">
</div>
I'm using $ionicPopup.confirm() in a list to ask whether to delete the row or not.
Unfortunately a second popup opens if the user ignores the popup and taps on another Delete-icon. Then only a reload of the app helps, since the first popup stays open and isn't closable.
Is there a way to lock the backdrop so no clicks come through to the underlying page while popup is open?
(Using ionic v1.0.1)
Code
controller:
this.deleteModule = function (index, item) {
return $ionicPopup.confirm({
title: $translate.instant('moduleplan.deleteModuleTitle'),
template: $translate.instant('moduleplan.deleteModuleText'),
cancelText: $translate.instant('moduleplan.deleteModuleCancel'),
okText: $translate.instant('moduleplan.deleteModuleOk')
}).then(function (response) {
if (response) {
return deleteModule(item.id);
}
});
};
view (shortened):
<ion-content scroll="true">
<ion-list type="list-inset"
show-delete="monthCtrl.isEditing"
show-reorder="monthCtrl.isEditing">
<ion-item class="item-timeline"
ng-repeat="module in monthCtrl.modules track by $index"
option-sort
option-sort-disabled="monthCtrl.optionSortDisabled(module)">
<!-- some content -->
<ion-delete-button
class="ion-minus-circled"
ng-click="monthCtrl.deleteModule($index, module)"
ng-hide="monthCtrl.optionDeleteDisabled(module)">
</ion-delete-button>
</ion-item>
</ion-list>
</ion-content>
Edit
While popup is opened, when I click on other buttons, they don't react (and in browser the cursor does not change to hand).
Analyzing one of the delete-buttons in the DOM:
<div class="item-left-edit item-delete enable-pointer-events visible active">
<ion-delete-button class="ion-minus-circled button icon button-icon" ng-click="monthCtrl.deleteModule($index, module)" ng-hide="monthCtrl.optionDeleteDisabled(module)">
</ion-delete-button>
</div>
When I remove enable-pointer-events class from div.item-delete, then hovering the element doesn't show hand and the delete-buttons are not clickable => no second popup is opened.
enable-pointer-events is defined by { pointer-events: auto; }.
div.popup-container has z-index: 12
div.item-delete has z-index: 0
ion-item has computed z-index: 2
found a few other z-index, but the sibling near backdrop (z-index: 11) and popup-container (z-index: 12) containing my list has only z-index: 2.
I use Angular JS library ngActivityIndicator.
I tried to show preloader inside element div instead text when button is pushed:
<div ng-activity-indicator="CircledDark">
<div ng-click="Add();" class="btn shareBtn">
<div ng-view></div>
<span>Text</span>
</div>
</div>
I posted <div ng-view></div> inside and have added directive ng-activity-indicator="CircledDark" to parent element.
When I click button, I call function that display preloader:
$activityIndicator.startAnimating();
But preloader is created outside of button:
<div ng-show="AILoading" class="ai-circled ai-indicator ai-dark-spin"></div>
This is official documantation, from here I have taken example:
https://github.com/voronianski/ngActivityIndicator#directive
How to show preloader inside button instead text Angular JS?
I think the only solution is to separate your ng-view and button, at least they do something similar in their sample page. So, in your markup you could do something like this:
<div ng-click="add()" class="btn btn-default" ng-activity-indicator="CircledDark">
<span ng-show="!AILoading">Add</span>
</div>
<div ng-view ng-show="!AILoading">{{ delayedText }}</div>
And in your controller:
$scope.delayedText = "";
$scope.add = function() {
$activityIndicator.startAnimating();
$timeout(function() {
$scope.delayedText = "Here we are!";
$activityIndicator.stopAnimating();
}, 3000);
};
Here is full Demo, you can play with CSS a little so the size of the button won't change when text is replaced by icon.
I am completely new to Angular js and I want to perform an operation i.e. clicking on a button would slide in a div from the right and clicking back again would send it back to right. Basically toggle it.
I know how to do with jquery as below, but the need is to do it in angular.
HTML:
<body>
<div>
Click me
</div>
<div id="content">
<div id="list">
</div>
</div>
</body>
CSS:
#clickhere {display:block; width:50px; height:50px; background:#999;}
#list{width:200px; height:100%; position:absolute;top:0;right:-200px;background:#323232;}
.slidein{right:0;}
JS:
$("#clickhere").click( function(){
if($("#list").css("right")== "0px")
{
$("#list").animate({right:"-200px"}) }
else{
$("#list").animate({right:"0"})
}
})
jsfiddle - http://jsfiddle.net/RJJwu/3/
Can anyone please help me with the angular code. I looked over a couple of examples such as :
1) Different transitions with AngularJS
2) http://mgcrea.github.io/angular-motion/ - in section Slide, 2nd button
The above links represent my actual need. I tried doing it via 1st link, but its not working.
Hint : add or remove a class (ngClass or ngHide) when the user click on the button (ngClick) and do the animation in CSS (transition).