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');
Related
I want to display the clicked row button details info in next view,I am displayin only code,nom in first page and remaining fields will view after clicking button. I used the option "filter" to do it, but sometimes it returns details of non concerned code , like for the two codes: 45 and 453 , it gaves the same detail because of the common number '45'.
First html page:
<ion-content class="padding" ng-controller="SuiviAdminCtrl" ng-init="load()">
<div class="row header">
<div class="col" >Code</div>
<div class="col">Client</div>
</div>
<div class="row" ng-repeat="x in namesC">
<div class="coll">
<a class="button" href="#/detail/{{x.Code}}">
{{x.Code}}</a>
</div>
<div class="col"> {{x.NomClient}} </div>
</div>
second html page (detail.html):
<ion-list ng-repeat="x in namesC| filter: {Code: thisX}|limitTo:1">
<ion-item>
<div class="item item-divider center-text"> {{x.Code}}</div>
</ion-item>
<ion-item>
<b>adresse</b> <span class="item-note"> {{x.adresse}} </span>
</ion-item>
</ion-list>
You just need to change the filter, so that it could match the code strictly.
<ion-list ng-repeat="x in namesC| filter: {Code: thisX}: strict|limitTo:1">
alternate syntax:
<ion-list ng-repeat="x in namesC| filter: {Code: thisX}: false|limitTo:1">
If you look at syntax of filter, you can specify filter. The default value of filter if false, which means comparison would not be strict.
fitler in angular
I have an accordion list as following:
<ion-list>
<div ng-repeat="day in days"><br>
<div class="item item-icon-left" ng-click="toggleGroup(day)" ng-class="{active: isGroupShown(day)}">
<i class="icon icon-accessory" ng-class="isGroupShown(day) ? 'ion-minus' : 'ion-plus'"></i>
{{day.name}}
</div>
<a class="item item-icon-left item-accordion" ng-show="isGroupShown(day)" ng-repeat="exercise in day.exercises" type="item-text-wrap"
href="#/tab/plan/{{exercise.id}}">
{{exercise.name}}
<!-- Trial LED -->
<span ng-show="{{exercise.watchedToday}}==true" style="float:right;"><i class="ion-checkmark-round"></i></span>
</a>
</div>
</ion-list>
On initial component load even though the condition is true i.e. {{exercise.watchedToday}}==true the span is not shown. If I put {{exercise.watchedToday}} above span it prints true but the span is not shown.
When I click on the link > some other component loads > and if I come back It is visible.
Why does it happen? It it because of multiple conditions i.e. ng-repeat, ng-show?
remove the curly brackets in ng-show. since ng-show is an angular directive no need to use curly brackets
<span ng-show="exercise.watchedToday" style="float:right;"><i class="ion-checkmark-round"></i></span>
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 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 have followed list of objects where I represent image + text.
Demo in PLUNKER
My goal is to set height of Item that equal to its width.
How can I achieve that?
Here is snippets of code:
<div class="list">
<a ng-repeat="pet in pets" class="item item-thumbnail-left">
<img ng-src="{{ pet.image }}">
<h2>{{ pet.album }}</h2>
<h4>{{ pet.artist }}</h4>
</a>
</div>
Comment
I use Ionic with Cordova but it doesn't refer to issue.
Thanks,