I want to be Toggling b/w two icons. For ex: When i clicked on grid icon it will show up grid data and hide List Icon.Again when i clicked on the same icon it will show up List data and hide grid Icon.
Here is my code in Tabs.html
<div menu-toggle="right" ng-hide="data.grid = !data.grid">>
And I found http://codepen.io/mhartington/pen/zxpwbK2 But it's related to Buttons.
At the same time one needs to be show and one needs to be hide,for that u can use ng-show and ng-hide
<div menu-toggle="right" ng-hide="data.grid = !data.grid">
for grid:
<div class="" ng-hide="data.grid = !data.grid">
for icon:
<div class="" ng-show="data.grid = !data.grid">
From my understanding, I think this is what you are expecting.
<ion-view view-title="Icon Sample">
<ion-header-bar>
<h1> Icon sample </h1>
</ion-header-bar>
<ion-content>
<button class="button button-icon" ng-click="toggleIcon()">
<i class="icon" ng-class="isToggled ? 'ion-ios-list-outline' : 'ion-grid'"></i>
{{buttonText}}</button>
</ion-content>
</ion-view>
and the controller code as follows:
.controller('sampleCtrl', function($scope){
$scope.isToggled = true;
$scope.buttonText = 'List';
$scope.toggleIcon = function(){
if($scope.isToggled){
$scope.isToggled = false;
$scope.buttonText ='Grid';
}
else{
$scope.isToggled = true;
$scope.buttonText ='List';
}
}
});
http://codepen.io/svswaminathan/pen/ByPKgp
Check out this codepen example to see if it fits your requirement.This has just the code to toggle the icon alternatively within a button. I believe you are able to load the data appropriately already
Related
I have template in my ionic app that looks something like this:
<ion-view>
<ion-content>
<div class="nav">
<span class="ion-chevron-left" ng-click="goToMonth('thisMonth', $event)"></span>
<span>{{ monthName }}</span>
<span class="ion-chevron-right" ng-click="goToMonth('nextMonth', $event)"></span>
</div>
<ion-scroll on-scroll="onScroll()" class="wide-as-needed" delegate-handle="calendarScroll" direction="x" paging="true" scrollbar-x="false" style="min-height: 215px" ng-style="scrollStyle">
...
the div with the class 'nav' contains two buttons that let the user switch between two months. The months are in the <ion-scroll> element.
This works as it should. The buttons scroll the <ion-scrol> element horizontally. But every time the buttons are used, the entire <ion-view> is scrolled vertically down by 20px - thus hiding the buttons.
I've tried changing the <ion-scroll>s inline css (with angular.element) to not include 3d transforms, but they just get re-added.
This is the function that gets called upon click - and my attempt to prevent the transform3d on the parent element
$scope.goToMonth = function(id, event){
$location.hash(id);
if(id == 'thisMonth'){
$scope.monthName = monthLabels[thisMonth];
}
else{
$scope.monthName = monthLabels[nextMonth];
}
var elm = angular.element(document.querySelector('.nav'));
var parent = angular.element(elm.parent());
console.log(parent[0].style.transform);
parent[0].style.transform = 'none';
$ionicScrollDelegate.anchorScroll(true);
};
EDIT: I've also tried using event.stopPropagation - this breaks the functionality of the <ion-scroll> element
Can anyone tell me how to prevent this behaviour?
Silly me. It turns out this was very simple to solve. I simply just needed to add scroll="false" to the <ion-content> element. No additional controller logic was needed.
So the html code above now looks like this:
<ion-view>
<ion-content scroll="false">// <-- Here I altered the html
<div class="nav">
<span class="ion-chevron-left" ng-click="goToMonth('thisMonth', $event)"></span>
<span>{{ monthName }}</span>
<span class="ion-chevron-right" ng-click="goToMonth('nextMonth', $event)"></span>
</div>
<ion-scroll on-scroll="onScroll()" class="wide-as-needed" delegate-handle="calendarScroll" direction="x" paging="true" scrollbar-x="false" style="min-height: 215px" ng-style="scrollStyle">
...
I have an application with a chat functionality which works great, except for one part, when the keyboard appears, the ion-content won't resize to a proper height, so I am stuck when I want to scroll to the top and the header disappears completely. The view has a header, content and footer and what I want is the footer to appear above the keyboard and the content to resize so it fits between the header and the footer-bar. The view I have created is as followed:
<ion-view id="userMessagesView" cache-view="true" flow-init flow-name="imageTemp.imageTemp" ng-if="!inChatSettings">
<div class="loader-center" ng-if="!doneLoading">
<div class="loader">
<i class="icon ion-loading-c"></i>
</div>
</div>
<div class="loader-center" ng-if="errorLoading">
<div class="loader">{{'error_loading_messages'|translate}}</div>
</div>
<ion-content class="has-header has-footer" has-bouncing="true" delegate-handle="userMessageScroll" style="background:red;">
<ion-refresher pulling-text="{{'pull_load_earlier'|translate}}" on-refresh="loadMore()"></ion-refresher>
<div ng-repeat="message in messageThread.messages | orderBy : 'postDate'" class="message-wrapper">
<div class="chat-bubble" ng-class="{ false: 'left', true:'right'}[{{message.postedBy|isCurrentUser}}]">
<div class="message-detail">
<span class="bold">{{message.postedBy.name}}</span>
</div>
<div class="message" ng-bind-html="message.message | nl2br" autolinker></div>
<img ng-src="{{message.imageUrl}}" ng-if="message.imageUrl"/>
<small am-time-ago="message.postDate">{{message.postDate|timeago}}</small>
</div>
<div class="cf"></div>
</div>
</ion-content>
<ion-footer-bar class="bar-light message-footer">
<button class="button button-icon icon icon-upload" flow-btn flow-file-added="imageUploaded($file)" flow-name="imageTemp.imageUrlTemp"></button>
<label class="item-input-wrapper" for="newmessage">
<textarea focus-me="input.focusInput" id="newmessage" ng-model="input.message" value="" required minlength="1" maxlength="1500" msd-elastic></textarea>
</label>
<button class="button button-clear" type="submit" ng-disabled="!input.message || input.message === ''" ng-click="sendMessage()" translate="send"></button>
</ion-footer-bar>
</ion-view>
I tried adding the keyboard-attach attribute to the ion-footer-bar, but the footer only gets bigger when I add this. Plus the footer already stays on top of the keyboard, so it appears unneeded. I have the following situation, it also appears that when I type something, the view goes up a little more.
This is when the keyboard is shown:
This is when the keyboard is hidden:
Does any of you know how to resize the ion-content to a normal height when the keyboard appears?
I have tried some things and the problem seemed to disappear, yet I don't think the solution is the right one or if this is actually the thing what solved the issue. So if anyone got a better solution, please share. First thing I had to do was including the Ionic keyboard plugin to get events based on the keyboard.
Inside the CSS, I have added:
.message-footer { min-height: 44px; }
Inside my controller I added the following code:
$scope.$on('taResize', function (e, ta) {
if(!ta || !footerBar) return;
var taHeight = ta[0].offsetHeight + 10;
var newHeight = (taHeight < 44) ? 44 : taHeight;
scroller.style.bottom = newHeight + 'px';
footerBar.style.height = newHeight + 'px';
});
I got a header bar outside of ng-repeat:
<ion-header-bar class="headerView" ng-show="!hideAll">
<button id="shareImage" class="button button-icon icon ion-share" style="color:#fff" ng-click="shareImageTo({{originalImageSource}})"></button>
<button class="button button-outline button-light close-btn" ng-click="closeModal()">{{::actionLabel}}</button>
</ion-header-bar>
And a slidebox where images are shown:
<ion-slide ng-repeat="single in slides track by $index">
<div class="item item-image gallery-slide-view">
<img ng-src="{{single.original}}">
<input type="text" ng-model="originalImageSource" value="{{single.original}}">
</div>
</ion-slide>
{{single.original}} is an URL to an image. But this URL is not placed in the input field. It is shown when I´m deleting this ng-model statement.
If a user clicks the button #shareImage the ShareImageTo(URL) function is executed. But with an undefined value for {{originalImageSource}}.
Any thoughts on how i could pass the URL in {{single.original}} to this ShareImageTo() function?
With $ionicSlideBoxDelegate you can get the current slide index via currentIndex(). That enables you to get the URL by $scope.slides[$ionicSlideBoxDelegate.currentIndex()].original in your ShareImageTo()-method like that:
$scope.ShareImageTo = function() {
var URL = $scope.slides[$ionicSlideBoxDelegate.currentIndex()].original;
//your logic
};
Another approach would be to use ion-slide-box's directive on-slide-changed.
Template:
<ion-slide-box on-slide-changed="slideHasChanged($index)">
...
</ion-slide-box>
Controller:
$scope.slideHasChanged = function(index) {
$scope.originalImageSource = $scope.slides[index].original;
//.. some more logic
}
Just create a div that wrap around both your navbar and your slidebox, and place your ng-repeat in that div :)
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 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.