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.
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 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
Im trying to display the car brand name and sub-list the car model names related to the car brand. But my car model names are displayed as an array and not as a list. Please help me to resolve it.
Link
<ion-list>
<ion-item ng-model="carBrand" ng-click="selectItem(carBrand)" ng-repeat="name in brandList">
<div class="item item-divider">
{{name.name}}
</div>
<div class="item">{{name.types}}</div>
</ion-item>
</ion-list>
Add ng-repeat for types as <div class="item" ng-repeat="type in name.types">{{type}}</div>
<ion-content ng-contorller="carBrand">
<h3> Add/Edit the Car Types </h3>
{{sample}}
Make:
<ion-list>
<ion-item ng-model="carBrand" ng-click="selectItem(carBrand)" ng-repeat="name in brandList">
<div class="item item-divider">
{{name.name}}
</div>
<div class="item" ng-repeat="type in name.types">{{type}}</div>
<br/>
</ion-item>
</ion-list>
</ion-content>
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'm currently working on my first Ionic app and with it my first exposure to Angular. My current hurdle is injecting group headers ("A", "B", "C", and so on) into a longish list (~600) of alphabetically sorted names. I've looked into solutions with filters, nested ngRepeats (which, specifically, didn't seem to play nice with Ionic's collection-repeat), but would like to accomplish this without the need for filtering or third-party dependencies like lodash or underscores.
My current target solution is to use a directive to prepend the header to the first element of each group of names.
The app is consuming content from Contentful's API and in the service I'm manually adding a group identifier based on the name's first letter. An example data set might be:
[
{"id":"1","name":"Carrie","group":"C"},
{"id":"2","name":"Gabe","group":"G"},
{"id":"3","name":"Gerry","group":"G"},
{"id":"4","name":"Hector","group":"H"},
{"id":"5","name":"Hilbert","group":"H"}
]
Here's the template:
<ion-content>
<ion-list>
<div collection-repeat="person in People" group-header>
<ion-item class="item-icon-right" type="item-text-wrap" href="#/app/people/{{ person.id }}" group="{{ person.group }}">
<h2>{{ person.name }}</h2>
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</div>
</ion-list>
</ion-content>
Here's the directive:
.directive('groupHeader', function () {
return {
compile: function (element) {
element.prepend('<div class="item item-divider" is-divider>{{ person.group }}</div>');
}
}
})
And currently, as expected, the prepend occurs for each repeated item:
<div collection-repeat="name in Names" group-header>
<div class="item item-divider ng-binding">C</div>
<ion-item class="item-icon-right item item-complex" type="item-text-wrap" href="#/app/names/1" group="C">
<a class="item-content" ng-href="#/app/names/1" href="#/app/names/1">
<h2 class="ng-binding">Carrie</h2>
<i class="icon ion-chevron-right icon-accessory"></i>
</a>
</ion-item>
</div>
<div collection-repeat="name in Names" group-header>
<div class="item item-divider ng-binding">G</div>
<ion-item class="item-icon-right item item-complex" type="item-text-wrap" href="#/app/names/2" group="G">
<a class="item-content" ng-href="#/app/names/2" href="#/app/names/2">
<h2 class="ng-binding">Gabe</h2>
<i class="icon ion-chevron-right icon-accessory"></i>
</a>
</ion-item>
</div>
I'd like to know if there are any recommendations for updating the directive so that it only prepends on the first instance of name in a given group. I'm happy to be pointed to resources, rather than a longhand solution--but either will be much appreciated.
Thanks!
I was able to accomplish what I was after with an ng-switch in the template:
<ion-content>
<ion-list>
<div collection-repeat="person in People">
<ng-switch on="$first || person.group != People[$index-1].group">
<ion-item type="item-text-wrap" ng-switch-when="true">
{{ person.group }}
</ion-item>
</ng-switch>
<ion-item class="item-icon-right" type="item-text-wrap" href="#/app/people/{{ person.id }}" group="{{ person.group }}">
<h2>{{ person.name }}</h2>
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</div>
</ion-list>
</ion-content>
Thanks to: https://stackoverflow.com/a/14076254/3426040.