I'm developing an ionic app for a WordPress site, so I'm consuming JSON data to load it into the app.
I successfully load my posts from the site but and when I try to filter the data receipts from simple field (fields of my JSON), it load the result filtered successfully
This example works :
<ion-item class="item item-thumbnail-left item-text-wrap item-icon-right" ng-repeat="post in recent_posts |filter:{date:searchtext}" >
but when I try to filter with a custom field, I cannot access to this field and can't get any result
this is some of my code that doesn't work correctly ( the custom field is trav_accommodation_address )
<label class="item item-input">
<input type="text" placeholder="Search here" ng-model="searchtext" ng-change="showSelectValue(searchtext)">
</label>
<ion-item class="item item-thumbnail-left item-text-wrap item-icon-right" ng-repeat="post in recent_posts |filter:{trav_accommodation_address:searchtext}" >
This is my JSON data
http://www.jneyne.com/api/get_post/?post_type=accommodation&id=2629
Try this :
<ion-item class="item item-thumbnail-left item-text-wrap item-icon-right" ng-repeat="post in recent_posts | filter: { custom_fields: { trav_accommodation_address: searchtext } }" >
trav_accommodation_address is under custom_fields so above should work
Related
I'm trying to retrieve data from json object for ionic mobile application. But the problem is inside that object has an array this array includes a set of objects. I need to get the key and value pairs from those set of objects, I tried following code to achieve that.
<ion-item ng-repeat="form in forms">
<ion-item>
{{form.Form_Group_Name}}
</ion-item>
<ion-item>
<label class="item item-input item-stacked-label colone-input" ng-repeat="(key, value) in form.items">
<span class="input-label">{{key}}</span>
<input type="text" value="{{ value }}" placeholder="First name">
</label>
</ion-item>
</ion-item>
This is working, but as a key it shows the index of the array (see the following images). Array size can be dynamically changed so then can't use index no to access this. I need to go inside the array and access the object to get key and value.
here is the sample of my json object
result is like this :
Thanks in advance.
This is how I did it:
<ion-item ng-repeat="form in forms['Form Groups']">
<ion-item >
{{form['Form Group Name']}}
</ion-item>
<ion-item>
<label class="item item-input item-stacked-label colone-input" ng-repeat="item in form.items">
<div ng-repeat="(key, value) in item">
<span class="input-label">{{key}}</span>
<input type="text" value="{{ value }}" placeholder="value">
</div>
</label>
</ion-item>
</ion-item>
As you can see here, I added <div> and inside that <div> iterate the item array. The item array includes all the data form json object and then I request key and value from array when the time of the iteration.
I'm getting some posts to my ionic app via JSON data , and I'm filetering the posts receipts with a searchbar input , the problem that the search bar input and the filetered results are showing in the same page , I want to show the result in another page , and the first page will be only for the search bar .
(I added the new page and I'll add a button for the search page
)
This is my code :
<label class="item item-input">
<input type="text" placeholder="Nom du Jneyne" ng-model="nom" ng-
change="showSelectValue(nom)">
</label>
<ion-item class="item item-thumbnail-left item-text-wrap item-icon-right"
ng-repeat="post in (filteredItems = ( recent_posts
| filter:{title:nom} " href="#/main/postDetail/{{post.id}}">
<img ng-src="{{post.thumbnail}}" />
<h2>{{post.title}}</h2>
<p ng-bind-html="post.excerpt" </p>
<ion-option-button class="button-dark">
<i class="icon ion-heart"></i>
</ion-option-button>
</ion-item>
</ion-list>
try adding ng-if and change code as
<label class="item item-input" ng-if="srhItem">
<input type="text" placeholder="Nom du Jneyne" ng-model="nom" >
<input type ="submit" value="search" ng-click="showSelectValue(nom)">
</label>
and your display part to
<div ng-if = displayResult>
<ion-item class="item item-thumbnail-left item-text-wrap item-icon-right"
ng-repeat="post in (filteredItems = ( recent_posts
| filter:{title:nom} " href="#/main/postDetail/{{post.id}}">
<img ng-src="{{post.thumbnail}}" />
<h2>{{post.title}}</h2>
<p ng-bind-html="post.excerpt" </p>
<ion-option-button class="button-dark">
<i class="icon ion-heart"></i>
</ion-option-button>
</ion-item>
</div>
and add $scope.srhItem = false,$scope.displayResult = true in your showSelectValue() function.and dont forget to add $scope.srhItem = true at the beginning of your controller
I have a form that works well, and I would like to add filters to it.
For the moment I can search for a person by his first name, but I would like to be able to search also with his name, and his e-mail address.
{
fname : "paul",
name : "raoul",
mail : "raou#paul.com"
}
Here is my search form:
<form ng-controller="searchCtrl" id="search-form5" class="list" name="myForm" ng-submit="search()" ng-disabled="myForm.$invalid">
<label class="item item-input" id="search-search1" style="">
<i class="icon ion-search placeholder-icon"></i>
<input placeholder="Search" type="text" ng-model="form.fname" required>
</label>
<ion-list id="menu-list1">
<ion-item ng-repeat="item in list track by $index" ng-click="showCard(item)">{{ item.name | UpFirstLetter }} {{ item.fname | UpFirstLetter }}</ion-item>
</ion-list>
</form>
Thank you for your answers :)
To search by any matching string of any form property, search model can be like:
<input placeholder="Search" type="text" ng-model="filterBy.$" required>
Then apply this filter in the ng-repeat by:
<ion-item ng-repeat="item in list | filter : filterBy track by $index" ng-click="showCard(item)">{{ item.name | UpFirstLetter }} {{ item.fname | UpFirstLetter }}</ion-item>
just add a filter to the ng-repeat
<ion-item ng-repeat="item in list | filter : form.fname track by $index" ng-click="showCard(item)">{{ item.name | UpFirstLetter }} {{ item.fname | UpFirstLetter }}</ion-item>
I have a collection-repeat element with lots of data on the view and I want to change its sorting when I select an option from the element. Although it assigns the correct value to the $scope.isAscending variable, collection-repeat list is not updating.
<ion-view cache-view="false">
<ion-content on-scroll="onContentScroll()">
<div class="list">
<label class="item item-input item-select item-light">
<div class="input-label">
Sorting:
</div>
<select ng-model="selectField" ng-change="chooseSorting(selectField)">
<option value="true">ascending</option>
<option value="false">descending</option>
</select>
</label>
<label class="item item-input">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="text" placeholder="Search" ng-model="q">
</label>
</div>
<div collection-repeat="item in items | orderBy: item.year: !isAscending | itemFilter: q | groupByProperty" divider-collection-repeat>
<ion-item class="item item-thumbnail-left item-button-right">
<a class="item-thumbnail-left" ng-click="openModal(item)">
<h3>{{item.name}}</h3>
<p>{{item.properties[0]}}</p>
<p>{{item.properties[3]}}</p>
</a>
</ion-item>
</div>
</ion-content>
</ion-view>
I tried to call $scope.$apply(function(){$scope.isAscending = value}) after the option was specified, It updates the scope value, but it doesn't refresh the repeating list, $state.go() doesn't work either.
Is there a way to refresh collection-repeat list ?
If I understood your question well, you want to filter the year based on select changes, right?
If so, first you don't need to use ng-change and second orderBy filter just needs the property (in your case year).
Change your select to:
<select ng-model="selectField">
<option value="">ascending</option>
<option value="false">descending</option>
</select>
Change your repeat to:
<div collection-repeat="item in items | orderBy: year: selectField | itemFilter: q | groupByProperty" divider-collection-repeat>
Take a look on docs of orderBy filter.
I am calling data from a web service and want to display the data in two ways. the first way is through a select/dropdown list which I have already done and it is working. The other way is to display it with an ion-item as a list, I have used the same coding for both so it should work. I have no errors and and the data for the ion-item does show in my console log so this tells me it is an issue of displaying it in html.
HTML:
Select/Dropdown:
<label class="item item-input item-select">
<div class="input-label">
Quote:
</div>
<select ng-model="selectedrep1" ng-init="selectedrep1()" ng-change="TruckData(selectedrep1)" ng-options="rep1.QuoteNumber for rep1 in rep1s">
<option value=""></option>
<option selected>Select</option>
</select>
</label>
Ion-Item
<ion-list ng-model="selectedtruck1" ng-options="truck1.TrucksName for truck1 in truck1s">
<ion-item class="item-stable" ng-value="">
</ion-item>
Use ng-repeat in ionlist, detailed example is given here
<ion-list >
<ion-item ng-repeat="truck1 in truck1s"
<h2>{{truck1.TrucksName}}</h2>
</ion-item>
</ion-list>