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.
Related
Why the ion-item will increase infinitely?
The json allItems like this:{'tag1':[],'tag2':[],'tag3':[]}
,every time change slide each array will add 10 data,but the array is increase infinitely.
<ion-slide id="{{key}}" style="width:100%;" ng-repeat="(key,value) in allItems" ion-slide-tab-label=“{{key}}”>
<ion-content style="width:100%;">
<ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>
<div>
<ion-list>
<ion-item class="item-thumbnail-left"
ng-click="detail(item.url,item.docid,item.title,item.imglink,item.openid)"
ng-repeat="item in value track by $index">
<img src="'https://'+{{item.imglink}}" alt="" />
<h2 ng-bind="item.title"></h2>
<span ng-bind="item.sourcename"></span>
<span ng-bind="item.date"></span>
<span ng-bind="item.tatalComment"></span>
</ion-item>
</ion-list>
</div>
<ion-infinite-scroll immediate-check="false" ng-if="more" on-infinite="getMore()" distance="1%"></ion-infinite-scroll>
</ion-content>
</ion-slide>
Your code is not clear. If you provide js part i can help correctly but my opinions are:
You are using infinite scroll in ng-repeat this is wrong. Every time you are adding it creates infinite scroll again.
You forgot to broadcast scroll completed?
$scope.$broadcast('scroll.infiniteScrollComplete');
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>
I created the application using as per below coding, I want to handle the list view with ionic search bar as per below image. Is it possible, If so suggest me some ideas or else code blog It would be helpful for me.
Note : As per below code, Searching was worked well but if the search happened its shows the text with matched list and even not matched list with an empty cell. So I want to handle the search like second snap mentioned below.
sample.html
<ion-view view-title="Call Lists">
<ion-content class="customListView" has-header="true">
<div class="bar bar-header item-input-inset">
<input type="search" placeholder=" Search" ng-model="searchValue"
style="width:100%; padding-left:11px;" />
</div>
<ion-list>
<ion-item class="item item-avatar item-icon-right" ng-repeat="item in callItems.objects" ng-click="doTask()" can-swipe="true">
<ion-option-button class="button-positive"
ng-click="doEdit()">
<i class="ion-more"></i>
</ion-option-button>
<img src="img/men.png">
<i class="icon ion-ios-arrow-right"></i>
<div ng-repeat="(key, value) in item.Fields | filter:searchValue">
<h3> {{value.Value}}</h3>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Output :
I Want to do like below :
While adding the below line empty cell issues got fixed.
<ion-item class="item item-avatar item-icon-right" ng-repeat="item in callItems.objects | filter:searchValue" ng-click="doTask()" can-swipe="true">
Instead of
<ion-item class="item item-avatar item-icon-right" ng-repeat="item in callItems.objects " ng-click="doTask()" can-swipe="true">
Thing is I've given two ng-repeat as per my scenarios, So I've to set search filter for both.
If anyone having the ideas regarding the search activity as per mentioned in the second snap, Share me your ideas or code blog It would be helpful for me.
I am displaying a normal list view getting data but the bottom is cut off.
In my css, I have: ]
.scroll {
height: 100%
}
My HTML is:
<ion-content scroll="true" ng-controller="CategoriesCtrl" overflow-scroll="true">
<ion-list>
<ion-item ng-repeat="category in categories | orderBy: 'id':true"
href="#/category/{{category.id}}"
class="item item-thumbnail-left catthumb list cat">
<img ng-src="{{category.acf.thumbnail.url}}" class="catthumb">
<span style="font-size: 21px; font-weight: 400;">{{category.name}}</span>
</ion-list>
</ion-content>
Here is the image:
You're missing the closing ion-item tag. It should be:
<ion-content scroll="true" ng-controller="CategoriesCtrl" overflow-scroll="true">
<ion-list>
<ion-item ng-repeat="category in categories | orderBy: 'id':true"
href="#/category/{{category.id}}"
class="item item-thumbnail-left catthumb list cat">
<img ng-src="{{category.acf.thumbnail.url}}" class="catthumb">
<span style="font-size: 21px; font-weight: 400;">{{category.name}}</span>
</ion-item>
</ion-list>
</ion-content>
This happen when we added another view level header or footer.
Simple solution is to add spacer div in the end of ur page with the height of ur page level header.
For more info
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.