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
Related
in my angular app I am using npm-hm-carousel. I need to auto select the field in the middle of the carousel like in the photo.
But also i need to bind one of the ids to the selected item, when i scroll the carousel.
<ngx-hm-carousel [(ngModel)]="currentIndex" [show-num]="3" [infinite]="infinite" [drag-many]="true"
[aniTime]="200" [data]="selectedServiceObj.packages" class="carousel c-accent">
<section ngx-hm-carousel-container class="content">
<article class="item cursor-pointer" ngx-hm-carousel-item
*ngFor="let package of selectedServiceObj.packages; let i = index"
[ngClass]="{'visible': currentIndex===i}">
<div class="package">
<div class="well">
<div class="row header-part">
<div class="col-sm-2">
<input type="radio" name="package" [value]="package._id" [checked]="i===currentIndex" [(ngModel)]="inputSelectedPackageId" (change)="changed($event)">
</div>
</div>
</div>
</div>
</article>
<ng-template #infiniteContainer></ng-template>
</section>
<ng-template #carouselContent let-package let-i="index">
<article class="item cursor-pointer" [ngClass]="{'visible': currentIndex===i}">
</div>
</article>
</ng-template>
<ng-template #carouselPrev>
<div class="click-area">
<i class="glyphicon glyphicon-chevron-left" aria-hidden="true"></i>
</div>
</ng-template>
<ng-template #carouselNext>
<div class="click-area">
<i class="glyphicon glyphicon-chevron-right" aria-hidden="true"></i>
</div>
</ng-template>
<!-- <ng-template #carouselDot let-item>
<div class="ball bg-accent" [class.visible]="item.index === item.currentIndex"></div>
</ng-template> -->
</ngx-hm-carousel>
but in this way the value is not setting to the [(ngModel)] directive. I think it is because the radio icon is not clicking. but when i use the below code fragment for select the radio button manually, the [value] binds to [(ngModel)]
<input type="radio" name="package" [value]="package._id" [checked]="" [(ngModel)]="inputSelectedPackageId">
Thank you!
as i know we can't bind a value to a radio button. Since the clicked state won't change in a radio button. But it is good if you can use checkbox. you ll able to bind values to a checkbox and identify the state change
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>
...
I want to have an ng-repeat that contains 2 buttons that opens 2 different modals. My problem is the first button successfully opens its modal but the second one does not.
here is my html
<div class="column" ng-repeat="eventObj in events" ng-repeat-dimmer>
...
<button class="circular ui icon green button" id="edit-event" data-inverted="" data-variation="tiny basic" ng-click="getCurrent(eventObj)" ng-repeat-modal-btn></button>
<button class="circular ui icon red button" id="delete-event" data-inverted="" data-variation="tiny basic" ng-click="getCurrent(eventObj)" ng-repeat-modal-btn></button>
...
</div>
and here are my two modals
<div class="ui edit-event modal">
<i class="close icon"></i>
...
<form>
...
<div class="field">
<button class="ui button" type="submit" ng-click="editEvent()">Submit</button>
</div>
</form>
</div>
<div class="ui delete-event modal">
<div class="header">Delete Event</div>
<div class="content">
<div class="ui form content">
Are you sure you want to delete {{eventObj.eventName}}?
</div>
</div>
<div class="actions">
<div class="ui green button" ng-click="deleteEvent(eventObj,$event)">Delete Event</div>
<div class="ui black cancel button">Cancel</div>
</div>
Again, I'd like to know why my second button does not work while the first does, thank you!
Code:
<ion-header-bar align-title="center" class="bar-positive">
<div class="button button-clear" ng-click="closeGlobalTaskModal()">Cancel</div>
<h1 class="title">Add Global Task</h1>
<div class="button button-clear" ng-click="saveAndCloseGlobalTaskModal()">Done</div>
</ion-header-bar>
<ion-content>
<form class="list item-text-wrap">
<!-- GLOBAL TASK NAME BOX START -->
<label class="item item-input">
<input type="text" placeholder="Enter Global Task Name" ng-model="globalTask.taskName" ng-keyup="maxLengthValidation()">
<h6 class="eag-character-count">{{globalTask.taskName.length}}/{{maxLength}}</h6>
</label>
<!-- GLOBAL TASK NAME BOX END -->
<ion-item class="item-divider">Category:</ion-item>
<!-- SEARCH BOX START -->
<label class="item item-input" name="Search">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="globalTask.task">
</label>
<!-- SEARCH BOX END -->
<!-- GOBAL TASK CODES (ng-repeat) START -->
<label class="item item-radio" collection-repeat="globalTaskItem in globalTaskList | filter:globalTask.task">
<input type="radio" name="group" ng-model="SelectedValue" ng-click="selectedGlobaltask(globalTaskItem)" ng-checked="{{checked}}">
<div class="item-content">
{{globalTaskItem.standardCodeName}}
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<!-- GOBAL TASK CODES (ng-repeat) END -->
<!-- NO RESULTS MESSAGE START -->
<label class="item" ng-if="results.length == 0">
<strong>No results found...</strong>
</label>
<!-- NO RESULTS MESSAGE END -->
</form>
</ion-content>
Screenshot of issue:
So I've got a bit of a messy ng-repeating list of radio buttons here. Some of them will have text that is too long for the width of the item and as such truncates with ellipsis. I've included the ionic class "item-text-wrap" at the list level (I've also tried at the item level with the same result) and it is working, however the height of the item does not adjust to the content when it's pushed down a line.
Do you know why this is happening/what I can do to fix this?
Thanks in advance!
This will help you.
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
I have this template that initially shows:
Sidebar1 - Content - Sidebar2
But when the user is in mobile view, I need to disappear the two sidebars and that this can be opened by a button, one at a time...
Button1 - opens sidebar1 to the right.
Button2 - opens sidebar2 to the left.
Anyone know if this is possible or has it done?
Code
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-2 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="list-group">
Link
Link
Link
Link
Link
Link
</div>
</div><!--/span-->
<div class="col-xs-12 col-sm-6">
<p class="pull-left visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas1">
Filters <i class="fa fa-arrow-right"></i>
</button>
</p>
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">
<i class="fa fa-arrow-left"></i>
Details</button>
</p>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
</div>
</div><!--/span-->
<div class="col-xs-3 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="list-group">
Link
Link
Link
Link
Link
Link
</div>
</div><!--/span-->
</div><!--/row-->
</div>
Javascript
$('[data-toggle=offcanvas]').click(function () {
$('.row-offcanvas').toggleClass('active');
});
$('[data-toggle=offcanvas1]').click(function () {
$('.row-offcanvas').toggleClass('active');
});
Let's give this a try... I added a new row at the bottom of your current HTML to represent the same exact links that are displayed on the edges but are hidden until a button is toggled. Let's take a look at the HTML first:
HTML
<div class="row">
<div class="col-xs-3 col-sm-3 sidebar-offcanvas hide trial2" id="sidebar" role="navigation">
<div class="list-group"> Link
Link
Link
Link
Link
Link
</div>
</div>
<div class="col-xs-3 col-sm-3 sidebar-offcanvas pull-right hide trial " id="sidebar" role="navigation">
<div class="list-group"> Link
Link
Link
Link
Link
Link
</div>
</div>
</div>
As you can see, I copy and pasted the exact same HTML and added the following classes: hide, trial, trial2
Class hide: This is a built in BootStrap class that hides all content within the specified tag. I toggle this class with jQuery later on.
Class trial/trial2 : This is just a random name I chose to make sure the toggle effect was going to work, you can virtually name it whatever you want, but just make sure you reference the tag.
Let's look at the new jQuery:
jQuery
$('[data-toggle=offcanvas]').click(function () {
$('.trial2').toggleClass('hide');
});
$('[data-toggle=offcanvas1]').click(function () {
$('.trial').toggleClass('hide');
});
It's virtually the same code you had but I have it now toggling the hidden content.
Conclusion:
I added a few other things as well - such as the ability to hide the two side-navigation bars as the screen shrinks to a smaller size. Just take a look at the code I will provide via a JSFiddle and you will understand it a bit better.
DEMO JSFiddle
I fixed like this:
HTML
<div class="row-fluid row-offcanvas row-offcanvas-left">
<div class="row-fluid row-offcanvas row-offcanvas-right">
<div id="filters"></div>
<div id="content">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav nav-pills">
<li class="visible-xs"><a> <span class="glyphicon glyphicon-filter" data-toggle="offcanvas" data-target=".sidebar-nav"></span> </a></li>
<li class="visible-xs"><a> <span class="glyphicon glyphicon-list-alt" data-toggle="offcanvas1" data-target=".sidebar-nav"></span> </a></li>
</ul>
</div>
</nav>
</div>
<div id="detail"></div>
</div>
JAVASCRIPT
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas-left').toggleClass('active');
});
$('[data-toggle=offcanvasa]').click(function() {
$('.row-offcanvas-right').toggleClass('active');
});