I have this in the footer :
<div class="bar bar-footer bar-assertive" ng-show="withdarawStatus">
<button class="button button-assertive" id="applyButton" ng-click="withdraw()">
Successfully Applied! Withdraw?
</button>
</div>
<div class="bar bar-footer bar-positive" ng-show="!withdarawStatus" >
<p id="applyButton" >Application Withdrawn</p>
</div>
I want to write a function that when I click withdraw() the footer changes to "Application Withdraw" footer.
I tried this but it didn't work, unless i reload the entire page.
$scope.withdraw = function() {
$scope.withdrawStatus = true;
}
You have a typo in your HTML ng-show="!withdarawStatus" should be ng-show="!withdrawStatus". That should fix the issue.
Edit: Here's a working codepen
Related
I'm using angular-ui-router-uib-modal and I have a question on it.
When I close my modal (which confirm a successfull/failed operation), I need to reload page below (that show a list of data). As shown in the example below, I can specify that behavior in 'Close' button and also in 'X symbol' to close modal (with the ui-sref-opts="{reload: true}").
But... How can I specify the same operation when a user clicks outisde the modal and automatically closes the modal itself?
<div class="modal-content">
<div class="modal-header">
<div class="bb8-modal-close" ui-sref="home.gestioneFondi({gestione:true, innescatoDaMenuLaterale:false})" ui-sref-opts="{reload: true}">
<span class="visuallyhidden glyphicon glyphicon-remove-circle"/>
</div>
<h4 class="modal-title modal-title-font">Info</h4>
</div>
<div class="modal-body" ng-switch="esito">
<p class="text-center modal-body-font" ng-switch-when="true">Success</p>
<p class="text-center modal-body-font" ng-switch-when="false">Error</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ui-sref="home.gestioneFondi({gestione:true, innescatoDaMenuLaterale:false})" ui-sref-opts="{reload: true}">Chiudi</button>
</div>
</div>
Thank you for any help
So when you open a modal like this it is returning the promise:
var modalInstance = $modal.open({..});
you can specify the modal closing event on the promise
modalInstance.result.then(function (result) {..});
You can specify below code to reload the state.
$state.reload();
For above to work, you have to inject $state dependency in your controller.
app.controller('controller', ['$state',function($state){..}])
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';
});
Hello I am trying to Customize Ionic Header. Code is shown below:
<ion-header-bar>
<div class="buttons">
</div>
<h1 class="title">{{title}}</h1>
<div class="buttons">
<span class="icons_all store">
<img src="img/assets/location.png">
</span>
</div>
</ion-header-bar>
Problem is when i try to redirect page to new page . Back button for above header which is also called on other pages , doesn't show .
Any help ?
You need to add
<ion-nav-back-button>
</ion-nav-back-button>
As per the document http://ionicframework.com/docs/api/directive/ionNavBackButton/
Since I'm a little weak with Javascript and still learning Angular.
I'm having trouble trying to combine a couple of UI's, not all at once of course.
Let me explain what I'm trying to do.
I have a sidemenu and I want to add a swipe card page when I tap on the swipe page in my menu. See my image below.
Having problem wrapping my head around how Angular does things, so any pointers & tips would be appreciative.
Is this what you are looking for?
http://codepen.io/andrewmcgivery/pen/bqEeI
Basically, to mix the two together, the ion-pane that contains the page of the swipe cards has to be in an ion-view.
<ion-view title="Welcome">
<ion-pane ng-controller="CardsCtrl">
<swipe-cards on-card-swipe="onSwipe($event)">
<swipe-cards>
<swipe-card on-card-swipe="cardSwiped()" id="start-card">
Swipe down for a new card
</swipe-card>
<swipe-card ng-repeat="card in cards" on-destroy="cardDestroyed($index)" on-card-swipe="cardSwiped($index)">
<div ng-controller="CardCtrl">
<div class="title">
{{card.title}}
</div>
<div class="image">
<img ng-src="{{card.image}}">
</div>
<div class="button-bar">
<button class="button button-clear button-positive" ng-click="goAway()">Answer</button>
<button class="button button-clear button-positive" ng-click="goAway()">Decline</button>
</div>
</div>
</swipe-card>
</swipe-cards>
</ion-pane>
I use ionic pet template.
I have a question about pet-detail page, if I would like to have a dynamic title on header, it will not show anything until I reload the page (using web browser), but I think it doesn't make sense since I would like to make an app.
Does I miss anything? what can I do?
here is my code as below:
<ion-nav-bar class="bar-positive">
<div class="buttons" ng-controller="BackCtrl">
<a class="button button-icon icon ion-chevron-left" ng-click="$back()"></a>
</div>
<h1 class="title"> {{ current_pet.name }} </h1>
..
If you happen to be using ion-view, use this:
<ion-nav-title>
{{ PageTitle }}
</ion-nav-title>
And put it outside your ion-content.
In my app I've used this:
<ion-view title="{{Properties.Title}}">
Where Properties is a object on my scope(I have sort of a master controller) where I "override" on each "inner controller".
If you are using and you want to show a button in the header bar only when an input/textarea is filled (not empty), then you can do the following.
<ion-header-bar class="bar-light">
<h1 class="title">{{$root.Title}}</h1>
<div class="buttons">
<button class="button button-clear icon ion-checkmark-round" ng-click="" ng-if="$root.Title"></button>
</div>
</ion-header-bar>
and inside "ion-content" -
<div class="row>
<textarea placeholder="" rows="3" maxlength="100" ng-model="$root.Title" ng-trim="false"></textarea>
</div>
Otherwise just using ng-if="Title" in the header bar will not work.