In my ionic app,I have a feature where the user should see in app's nav bar horizontal dot lines,click on them and then a pop up menu should appear with two menu items(add to favorites and add a comment). The below picture illustrates my point.
The problem though is that those 3 horizontal dots don't appear in the nav bar of the app.
Here is the code for the ion-nav-button.
<ion-view view-title="News Details">
<ion-content>
<ion-nav-buttons side="secondary">
<div class="buttons">
<button class="button button-icon icon ion-more"
ng-click="openPopover($event)"></button>
</div>
</ion-nav-buttons>
<div class="card">
<div class="item item-body item-text-wrap">
<img class="full-image" ng-src="{{detailedNews.image}}" alt="Uthappizza">
<h3>{{detailedNews.title}}</h3>
<p>{{detailedNews.description}}</p>
</div>
</div>
<div class="row">
<div class="col col-offset-10">
<h4>Customer Comments
<small>Sort by:
<input type="text" ng-model="orderText">
</small></h4>
<ul class="list">
<li ng-repeat="comment in dish.comments | orderBy:orderText">
<blockquote>
<p>{{comment.rating}} Stars</p>
<p>{{comment.comment}}</p>
<footer>{{comment.author}}, {{comment.date | date:'MMM. dd, yyyy'}}</footer>
</blockquote>
</li>
</ul>
</div>
</div>
</ion-content>
</ion-view>
Maybe there is something wrong in this line.
<button class="button button-icon icon ion-more"ng-
click="openPopover($event)"></button>
Can you help me?
Thanks,
Theo.
Try wrapping the <ion-nav-buttons></ion-nav-buttons> directive inside an <ion-nav-bar></ion-nav-bar> directive and taking it out of ion-content.
<ion-view view-title="News Details">
<ion-nav-bar>
<ion-nav-buttons side="secondary">
<div class="buttons">
<button class="button button-icon icon ion-more"
ng-click="openPopover($event)"></button>
</div>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content>
...
Related
i made a filter for my ionic app that work very well on google chrome (whit the ionic serve) but when i build my apk it doesnt do anything what could be the problem?
this is the search code
<ion-content class="fondo has-subheader">
<div class="bar subheader item-input-inset bar-light">
<label class="item-input-wrapper">
<input type="search" ng-model="busqueda" placeholder="Buscar">
</label>
</div>
<ion-list>
<ion-item class="button button-icon center" ng-repeat="cate in categorias | filter: busqueda" type="item-text-wrap" href="#/tab/categoria/{{cate.id}}" >
<img class="img_cat" ng-src="{{cate.imagen}}" >
<h2 class="categoria_n">{{cate.nombre}}</h2>
</ion-item>
</ion-list>
</ion-content>
<ion-content class="fondo has-subheader">
<div class="bar subheader item-input-inset bar-light">
<label class="item-input-wrapper">
<input type="text" ng-model="search" placeholder="Buscar">
</label>
</div>
<ion-list>
<ion-item class="button button-icon center" ng-repeat="cate in categorias | filter : search" type="item-text-wrap" href="#/tab/categoria/{{cate.id}}" >
<img class="img_cat" ng-src="{{cate.imagen}}" >
<h2 class="categoria_n">{{cate.nombre}}</h2>
</ion-item>
</ion-list>
</ion-content>
And try ui-sref in replace of href="#/tab/categoria/{{cate.id}}"
i am tryng to show ion items with ion header bar having default ion nav bar.
The problem is, i want ionic bar header in one page rather than ionic nav bar. i tried with below but no luck.
Below from index.html
<ion-nav-bar class="bar-light bar-positive">
<ion-nav-back-button class="button-icon icon ion-ios-arrow-back"></ion-nav-back-button>
</ion-nav-bar>
Below from one page:
<ion-view title="items" id="page15" >
<ion-content ng-controller="itemsCtrl" class="has-header" hide-nav-bar="true">
<ion-header-bar class="bar-positive">
<div class="buttons">
<button class="button button-icon icon ion-ios-minus-outline"
ng-click="data.showDelete = !data.showDelete"></button>
</div>
items
<div class="buttons">
<button class="button button-icon icon ion-log-out" ng-click="test()">
</button>
</div>
</ion-header-bar>
<ion-list show-delete="data.showDelete" >
<ion-item ng-repeat="item in items"
item="item"
class="item-remove-animate">
{{ item.name }}
<ion-delete-button class="ion-minus-circled"
ng-click="onItemDelete(item)">
</ion-delete-button>
</ion-item>
</ion-list>
</ion-content>
<div class="float-button" ng-click="additem()">
<span class="height-fix">
<a class="content">
<i class="ion-ios-plus-empty"> </i>
</a>
</span>
</div>
</ion-view>
The output is coming as below
i dont want the default ion nav bar n that page and want only ionic header bar.
I got it finally. Just add nav bar buttons instead of ionic header bar.
I have a ionic popover , what i need to do is when i select any option from popover that is last in the list after scroll ,.after the selection the popover gets closed, but when i reopen that popover again it again takes me to the top of the scroll , i want to scroll till the selected item in popover when i open it again ?
here is my html:
<script id="templates/ListViewCreator.html" type="text/ng-template">
<ion-popover-view class="filterpopoverMargins">
<ion-header-bar class="">
<h1 class="title" style="color: black;">Select Views</h1>
</ion-header-bar>
<ion-content>
<div class="list selectfilterListClass" ng-repeat="item in filterColumn" style="background-color:darkgrey!important;" ng-click="itemCheckedUnCheckedFilterhandler(item)">
<label class="item item-radio wrapping-list ">
<input type="radio" name="group">
<div class="item-content" style="">
{{item.label}}
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</div>
</ion-content>
<ion-footer-bar>
<button ng-click="defaultSetting()" class="button bar-balanced defaultbtnClass">Default</button>
</ion-footer-bar>
</ion-popover-view>
</script>
Kindly help me to get the answer
I'm trying to use Ion-infinite-scroll inside ion-side-menu, the fetch more function is not being called.
Is it possible to use ion-infinite-scroll inside ion-side-menu?
I added the directive, but the method "loadMore()" is not being called.
This is the line I use:
<ion-infinite-scroll on-infinite="loadMore()" ng-if="true" distance="10%"></ion-infinite-scroll>
and this is the loadMore() method:
$scope.loadMore = function() {
console.log("showMore");
};
The complete html is :
<ion-side-menus enable-menu-with-back-views="true" cache-view="false">
<ion-side-menu-content ng-class="{'opaque-content' : isMenuOpen}">
<ion-nav-bar class="bar-stable">
<ion-nav-buttons side="left">
<button class="button button-icon" menu-toggle="left">
<img class="menu-icon" src="img/menu-icon.png" />
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<div class="button-icon">
<img ng-show="showUserImage" class="default-channel-image" src="img/default-channel.png" />
<img ng-show="showAnonymouseChannel" class="discussion-title-image img-border" src="img/anonymous-icon.png" />
</div>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" width="320">
<ion-header-bar class="bar-stable menu-background">
<a class="setting-icon-wrapper" href="#/app/preferences" menu-close>
<img class="settings-icon" src="img/settings.png" />
</a>
<form class="search-input-wrapper" ng-submit="search(discussionFilter.data)">
<input type="text" id="searchFilter" class="search-input" ng-model="discussionFilter.data" placeholder="Find channels..." ng-change="changeSearch(discussionFilter.data)" ng-model-options='{ debounce: 1000 }'/>
<div ng-hide="discussionFilter.data != null && discussionFilter.data != ''" class="search-icon-wrapper" ng-click="search(discussionFilter.data)">
<i class="fa fa-search fa-2 search-icon"></i>
</div>
<div ng-show="discussionFilter.data != null && discussionFilter.data != ''" class="clear-search" data-ng-click="discussionFilter.data = '';search(discussionFilter.data)">
<img src="img/clear-results.png" class="clear-results">
</div>
</form>
</ion-header-bar>
<ion-header-bar class="bar-subheader channels-header short-header" ng-show="discussions.length > 0" ng-class="">
<div class="list-items-header channels-header" ng-show="discussions.length > 0">
<p class="list-header-title">CHANNELS</p>
<div class="create-channel-area" ng-click="MoveToNewChannel()" menu-close>
<img class="plus-icon" src="img/plus-button.png"/>
</div>
</div>
</ion-header-bar>
<ion-content class="channel-headers menu-background" ng-show="discussions.length > 0" ng-click="closeKeyboard()">
<ion-list class="menu-background menu-list" ng-click="closeKeyboard()">
<ion-item class="menu-background" menu-close ng-href="#/app/discussion/{{discussion.id}}" ng-click="closeKeyboard()" ng-repeat="discussion in discussions">
<div class="menu-channel-text" ng-class="{'subject-regular' : discussion.read}"> {{discussion.subject | truncate_word:18}} </div>
</ion-item>
</ion-list>
<!--<ion-infinite-scroll on-infinite="loadMore()" immediate-check="false" ng-if="isMenuOpen && showMoreDiscussions" distance="10%"></ion-infinite-scroll>-->
</ion-content>
</ion-side-menu>
</ion-side-menus>
The solution was:
Added $scope.$broadcast('scroll.infiniteScrollComplete'); to the end of my loadMore function.
I am creating an app using ionic.
I have some buttons on the menu: messages, Settings, Help and Back.
I would like the back button does not appear on the dashboard page.
Anyone know how I do it? Thanks,
Ps .: I tried to use the ion-nav-back-button, but had some problems.
top menu
This is a menu.html
<ion-side-menus enable-menu-with-back-views="false" >
<ion-side-menu-content>
<ion-nav-bar class="bar-stable bar-balanced">
<ion-nav-buttons side="left">
</ion-nav-buttons>
<ion-nav-buttons side="right">
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
and this is a dashboard.html
<ion-view view-title="">
<ion-content class="padding">
<div class="list">
<div class="row">
<div class="col">
<span>Type your message:</span>
<div class="item-input item-stacked-label">
<textarea type="text"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col">
<span>Choose the distance:</span>
<div class="range range-balanced">
<input type="range" name="distance" min="1" max="10000" value="1000">
</div>
</div>
</div>
<div class="row">
<div class="col">
<span>Anexar imagem:</span>
<button class="button button-balanced button-full">Selecionar</button>
</div>
</div>
<div class="row">
<div class="col">
<a class="button button-icon icon ion-chevron-right float-right"></a>
</div>
</div>
</div>
</ion-content>
</ion-view>
Thanks!
What if you simply use ng-hide="homepage". Set $scope.homepage=true in the Homepage's controller. For other pages it will be undefined and therefore false so it won't be hidden.
dont know this is best way or not but its working for me..!try this.!
add this in controller related to sidemenu:
$scope.$watch(function () {
return $ionicSideMenuDelegate.getOpenRatio();
}, function (value) {
if (($state.$current.name == "app.dashboard")) {
$scope.hideButton = true;
}else{
$scope.hideButton = false;
}
});
html :
other way to do this is..:add whichever button u want in particular view and remove from sidemenu html.
<ion-view view-title="">
<ion-nav-buttons side="right">
</ion-nav-buttons>
<ion-content class="padding">
</ion-content>
</ion-view>
hope , it helps someone.!