I'm trying to set up scrolling sub-tabs in a tabbed Ionic 1 app. The idea is to have a header with basic informational stuff and a button-bar to navigate between the various sub-tabs. The content of these sub-tabs should be able to scroll without scrolling the main parent content.
I've been able to set this all up, except for getting the child tab content to scroll separately.
Things I've tried:
Putting the child content in its own ion-content. The resulting content completely covers the parent tab content.
Putting the child content in its own ion-scroll. There's a giant ugly scroll bar on the right hand side, and the content doesn't actually scroll.
I've created a Plunker here that demonstrates what I'm trying to do. Any insights on how to structure something like this gracefully?
Parent tab view
<ion-view title="Home">
<ion-content style="" class="has-header" scroll="false" padding="true">
<div class="item item-avatar">
<img src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png">
<h3>
<i class="ion-person"></i> Username
<p>Basic user fact 1</p>
<p>Basic user fact 2</p>
</h3>
</div>
<div class="button-bar">
<a class="button button-positive" ui-sref="tab.dash.about">About me</a>
<a class="button button-assertive" ui-sref="tab.dash.photos">Photos</a>
</div>
<ui-view name="tab-dash-content"></ui-view>
</ion-content>
</ion-view>
Example tab child content
<ion-scroll direction="y">
<div class="list">
<div class="item item-text-wrap">
These 20 items below should scroll without scrolling the section or buttons above!
</div>
<div class="item" ng-repeat="i in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20] track by $index">
About item: {{i}}
</div>
</div>
</ion-scroll>
Related
I am trying to put a full width image with certain height at the top of the ionic page (under the nav, before the list). The image does work as I put it in the list, it's just not showing at the top. Any ideas?
<ion-view view-title="{{pageTitle}}">
<ion-content>
<img ng-src="{{post.acf.top_image_full_list}}">
<ion-list>
<div class="list">
<a ng-repeat="post in posts"
href="#/tab/watch/{{current_category_id}}/{{post.id}}"
class="item item-thumbnail-left">
<img ng-src="{{post.acf.top_single_msg}}">
<div class="postcat">
<span style="font-size: 17px;">{{post.title.rendered}}</span>
<p>{{post.date | date}}</p></div>
</a>
</div>
</ion-list>
</ion-content>
</ion-view>
you are trying to access the image post.acf.top_image_full_list - which is within a 'post' object. However you do not create the 'post' object until further down in the list with the line <a ng-repeat="post in posts" - you are trying to use the 'post' object outside of the ng-repeat.
I have an index.html page that has a link on it that displays modal dialog when clicked.
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>Modal sample text</p>
</div>
<div class="modal-footer">
Close
</div>
</div>
Also index page displays partial pages inside a ui-view:
<div class="" ui-view>
</div>
The link that opens the modal is on the index page in the , so it is visible on any page. The problem I am having is when Close button is clicked, the modal dialog closes but then the user is taken to the login page.
This is happening because href="#". In order for it to be taken the a page should be something like #/page1. So it has to be set dynamically as the user navigates through the site. I can't seem to figure out a way to do that. Can anyone help?
The page url is something like this:
http://localhost:77777/index.html#/page1
So I'd need to capture the page it is on and assign it to href property dynamically. How could I do that?
Why don't you use a button and ng-click?
something like:
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>Modal sample text</p>
</div>
<div class="modal-footer">
<button ng-click="closeModal()" class="modal-action modal-close waves-effect waves-green btn-flat">Close</button>
</div>
</div>
And on the controller:
$scope.closeModal = function(){
//your code to close the modal window
}
Hope it helps
I have created a slider which slides 3 data at one time. But i want to add some animation like that of real slide. How do i do in angular js? I have code like below
moverightRecArts changes the startIndexArt and endIndexArt values from controller.
<div class="col-md-12">
<div class="col-md-4" ng-repeat="a in abc.slice(startIndexArt, endIndexArt)" >
<div class="col-md-12">
<div class="col-md-3">
<img ng-src="{{a.url}}">
</div>
</div>
<div class="col-md-12">
<div class="col-md-12">
<h3>{{a.sub}}</h3>
</div>
<div class="col-md-12">
<p>{{a.bod}}</p>
</div>
</div>
</div>
</div>
<div class='col-move-next-Art'>
<span aria-hidden="true" class="glyphicon glyphicon-chevron-right" ng-click="moverightRecArts()"></span>
</div>
Pleas check https://daneden.github.io/animate.css/
Dynamic Animation
You have to call animation function like
<ion-view class="myAnimation">
<ion-content>
....
</ion-content>
</ion-view>
and add class when page is loaded
$('#myAnimation').addClass('animated shake');
and after animation finish you have to remove class which is added to div so again animation works without refresh page. for that you have to do that
$('#myAnimation').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', removeClass);
function removeClass()
{
$('#myAnimation').removeClass('animated shake');
}
This way is dynamic but you can also set as static in html like
Static
<ion-view class="animated shake">
<ion-content>
....
</ion-content>
</ion-view>
I have a playlist page where i create my custom tabs. Tabs working very well but the problem is that when i scroll down first tab content and then move to another tab then scroll position remain same, i am not able to see the content of second tab.
And I don't want to use default tabs of ionic.
Here is plnkr link where i implement my code:-
<ion-view view-title="Playlists" class="tabSection">
<div class="tabs-striped tabs-top tabs-background-dark tabs-color-energized">
<div class="tabs">
<a class="tab-item" ng-click="articles(false)">
Home
</a>
<a class="tab-item" ng-click="categories(true)">
Favorites
</a>
</div>
</div>
<ion-content>
<div class="articleSection" ng-hide="showme">
<ion-list>
<ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
{{playlist.title}}
</ion-item>
</ion-list>
</div>
<div class="categorySection" ng-show="showme">
<ion-list>
<ion-item ng-repeat="playlist in favorites" href="#/app/playlists/{{playlist.id}}">
{{playlist.title}}
</ion-item>
</ion-list>
</div>
</ion-content>
</ion-view>
http://plnkr.co/edit/nlUgR8?p=preview
Any Suggestion?
Thanks
You can use $ionicScrollDelegate.
.controller('PlaylistsCtrl', function($scope,$ionicScrollDelegate) {
$ionicScrollDelegate.scrollTop();
});
This will show scroll content from top.
Hope it works for you.
I am trying to get this ng-repeat loop to work with the bootstrap carousel, but the way I understand and am currently using the carousel elsewhere is that only one div containing an image can be marked with the 'active' class, and one div must be marked with active otherwise the carousel fails. It also fails if more than one is marked. One and only one div can be marked active. Every other div should just be marked 'class=item' How to do I make that happen with ng-repeat? Thank you.
<div class="carousel" id="slider" style="margin-left: 20px;">
<label class="labelSecurity">Incident Photos</label><br />
<div class="carousel-inner">
<div class="item active" ng-repeat="photo in photoPath">
<img src="{{ photo.path }}" class="img-responsive">
</div>
</div>
<a class="carousel-control right" href="#slider" data-slide="next"></a>
</div>
Then just mark the first one as active, like this:
<div class="item" ng-class="{active:!$index}" ng-repeat="photo in photoPath">