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>
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 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
I write this code for add contact to group.
how i make line by line checkbox?
this is in line checkbox list.
<ion-list>
<ion-item ng-repeat="employee in employees" >
<label class="checkbox">
<input ng-model="checkGroups[employee.id]" type="checkbox">
</label>
{{employee.name}}
</ion-item>
</ion-list>
<ion-list>
<ion-item ng-repeat="employee in employees track by $index ">
<label class="checkbox">
<input name={{$index}} ng-model="checkGroups[employee.id]" type="checkbox">
</label>
{{employee.name}}
</ion-item>
</ion-list>
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 trying to set the value of input equal to the item in ion-list based on a click event. The value updates on first click event but is not updating on later clicks
<ion-view view-title="Add Cities">
<ion-content>
<label class="item-input-wrapper bar-subheader">
<i class="icon ion-android-search placeholder-icon"></i>
<input style="width:100%" type="text" placeholder="Search" ng-model="CityName">
</label>
<ion-button class="button ion-plus button-positive" ng-click="addCity(CityName)" >Add</ion-button>
<div class="list">
<ion-list>
<ion-item ng-repeat="item in states|filter:CityName" ng-click="set(item)">
{{item}}
</ion-item>
</ion-list>
</ul>
</div>
</ion-content>
</ion-view>
associated function in controller.js
$scope.set=function(title){
$scope.CityName=title;
console.log(title);
}
i have checked console the function triggers but the input updates only once
i have tried adding $scope.$apply() in function set but it's still not working. Please suggest edits in the above code or is there a better method to do the same?
The answer is explained here by #Pankaj Parkar
My problem was fixed by renaming ng-model="CityName" to ng-model="data.CityName"
<input style="width:100%" type="text" placeholder="Search" ng-model="data.CityName">
and changing this
$scope.set=function(title){
$scope.CityName=title;
console.log(title);
}
to
$scope.set=function(title){
$scope.data={'CityName':title};
console.log(title);
}