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>
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 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'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.
I just started with Angular and I got a code sample from codepen Accordion List
I'm trying to use my data in the html like this:
<div class="group">
<ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}"></ion-item>
<ion-item class="item-accordion" ng-show="isGroupShown(group)">
<div class="form-group">
<label></label>
<input>
</div>
</ion-item>
</div>
<div class="group">
<ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}"></ion-item>
<ion-item class="item-accordion" ng-show="isGroupShown(group)">
<div class="form-group">
<label></label>
<input>
</div>
</ion-item>
and the JS is set like this:
angular.module('my-app',['ionic'])
.controller('main', function($scope) {
$scope.groups = [{
name: "Basic Info",
items: [1,2,3]},
{
name: "Torso Measures",
items: [1,2,3]},
{
name: "Extra measures",
items: [1,2,3,4,5],
}
];
$scope.toggleGroup = function(group) {
if ($scope.isGroupShown(group)) {
$scope.shownGroup = null;
} else {
$scope.shownGroup = group;
}
};
$scope.isGroupShown = function(group) {
return $scope.shownGroup === group;
};
});
The problem is that whenever I click in 1 group, all of them expand / collapse. In JS / jQuery I'd pass an id but I think there is an "angular way" to do it. Could someone help me?
Demo without ng-repeat here.
Demo with ng-repeat here.
Why your code cant work:
Since you didn't use ng-repeat in your markup, group in these places
<ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}"></ion-item>
<ion-item class="item-accordion" ng-show="isGroupShown(group)">
are both undefined.
You need init the group variable for toggleGroup(group),isGroupShown(group) and should be different name if used twice in same scope.Update your html:
<div class="group" ng-init="groupid1=1">
<ion-item class="item-stable" ng-click="toggleGroup(groupid1)" ng-class="{active: isGroupShown(groupid1)}"></ion-item>
<ion-item class="item-accordion" ng-show="isGroupShown(groupid1)">
<div class="form-group">
<label></label>
<input>
</div>
</ion-item>
</div>
<div class="group" ng-init="groupid2=2">
<ion-item class="item-stable" ng-click="toggleGroup(groupid2)" ng-class="{active: isGroupShown(groupid2)}"></ion-item>
<ion-item class="item-accordion" ng-show="isGroupShown(groupid2)">
<div class="form-group">
<label></label>
<input>
</div>
</ion-item>
</div>
However,By using ng-repeat, you can use your html with wrapped like this:
<div class="group" ng-repeat="group in groups track by $index">
<ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}"></ion-item>
<ion-item class="item-accordion" ng-show="isGroupShown(group)">
<div class="form-group">
<label></label>
<input>
</div>
</ion-item>
</div>
It should works.
The fact that all your groups expand on click is probably because you have (in your snipet of code) two divs that uses the same group model.
I am talking about the group given in to your toggle function :
ng-click="toggleGroup(group)"
In the tutorial, the writter uses an ng-repeat directive to generate his divs
<div ng-repeat="group in groups">
this line goes in groups and take each item in groups member into a new group model. This could be why your accordions all expands,(and probably have the same content all of them). Could you give us a litle more co
If you want to use bootstrap accordion I can advise you to look at Angular-ui, an Angular module to replace bootstrap.js and make the same things in an Angular way (using directives, databinding....).
How may I hide a item-divider which no has list-items when I'm using the filter? This is the code:
<div ng-repeat="elem in codeList | orderBy:predicate:reverse">
<div class="item item-divider">
{{elem.data}}
</div>
<ul class="list">
<li class="item item-icon-right" ng-repeat="item in elem.array | filter:search" ng-click="action(item)">
<h2>{{item.text}}</h2>
<i class="icon ion-{{item.icon}}"></i>
</li>
</ul>
</div>
I would like to know how to do it in "Angular way".
You'll need to alias your filtered list with as filteredItems (works with Angular 1.3) and use the filteredItems.length to conditionally show/hide your item-divider.
<div ng-show="filteredItems.length" class="item item-divider">
{{elem.data}}
</div>
<ul class="list">
<li class="item item-icon-right"
ng-repeat="item in elem.array | filter:search as filteredItems"
ng-click="action(item)">
<h2>{{item.text}}</h2>
<i class="icon ion-{{item.icon}}"></i>
</li>
</ul>
I would go for ng-hide
<div class="item item-divider" ng-hide="elem.array.length == 0">
{{elem.data}}
</div>