I am trying to use ng-if in ng-repeat for implementing Accordions. Based upon the condition value, the ng-repeat should skip some items in ng-repeat.
E.g. If the item.condition is true then only it should display accordion.
The code below is what I have so far and it is not working. Does it look right?
<accordion close-others="true">
<accordion-group is-open="isopen" ng-repeat="item in items | limitTo:2" ng-if="item.condition == "true"",ng-init="isopen=2">
<accordion-heading>
{{item.label}}
<i class="pull-right glyphicon"
ng-class="{'icon-arrow-up': isopen, 'icon-arrow-down': !isopen}"></i>
</accordion-heading>
</accordion-group>
</accordion>
Your ng-if contain double extra quotes, It should be ng-if="item.condition == true", Also remove the , from the accordion element
Also you could minimize your condition to ng-if="item.condition" so then expression will return true and false on item.condition variable evaluation.
Markup
<accordion close-others="true">
<accordion-group is-open="isopen" ng-repeat="item in items | limitTo:2"
ng-if="item.condition" ng-init="isopen=2">
<accordion-heading>
{{item.label}}
<i class="pull-right glyphicon" ng-class="{'icon-arrow-up': isopen, 'icon-arrow-down': !isopen}"></i>
</accordion-heading>
</accordion-group>
</accordion>
Related
I wrote the next code, but when I click on the trash icon, the ng-click of this element is thrown, but the ng-click of the div container is thrown too, I don't need the second one, just the first call, could some body help me.
<div ng-if="order.selectedProducts === null || order.selectedProducts.length > 0"
class="cartCol hoverable" ng-repeat="product in order.selectedProducts track by $index"
ng-click="showProductDetailed(product)">
<div class="cartHeading" ng-bind="product.name"></div>
<a href="" class="trashIcon" ng-click="removeSelectedProduct(product);">
<i class="fa fa-trash"></i>
</a>
<div class="cartSizeInfo">
<span class="fltLft">{{product.productTypeName}}</span>
<span class="fltRht">Bs. {{product.price}}</span>
</div>
</div>
I had to put $event.stopPropagation(); after the first call.
I am searching for a solution for showing a div when mine ng-repeat list is empty. I have created a list (with search filter) with different ice creams. I would like to show a div when the list is not showing any items, even when I did a search query. I am using ionic version 1 with angular v1.54.
I've tried different things and searched on Stackoverflow for questions like this. Unfortunately the answers doesn't help me any further. As example I've tried the following answer
https://stackoverflow.com/a/32960240/5503094
But that doesn't seem to work.
My code
ng-repeat
<ion-item ng-repeat="item in icecreams | filter: query as filteredItems" class="item-thumbnail-left item-text-wrap repeated-item" href="#" ng-if="item.beschikbaar == 'Ja'">
<img src="http://placehold.it/100x100">
<h2>{{ item.name }}</h2>
<p>{{ item.info | limitTo: 100 }}{{item.info.length > 100 ? '...' : ''}}</p>
<h4>{{ item.type }}</h4>
<h4>In de winkel tot: {{ item.end_date }}</h4>
</ion-item>
div to show when the list is empty (even with filtering/searching)
<div class="item" ng-hide="!filteredItems.length == 0">
<p>Er zijn geen ijssoorten gevonden!</p>
</div>
This only works when the list is empty from the begin. Can someone help me out?
Try checking if filteredItems exists also
<div class="item" ng-hide="filteredItems && filteredItems.length">
<p>Er zijn geen ijssoorten gevonden!</p>
</div>
I'm working in contact card. I need to add Name and contact number in the list. But the condition is Name and contact must be added only 2 times. for ex.
Contact Card-1
Name-A
Name-B
Contact-1
Contact-2
Whenever I click on the button my name and contact get added in the list but with certain condition.
My code is
<md-list-item ng-show="showContactList" class="md-2-line" ng-repeat="numbers in contactList track by $index" >
<i ng-show="numbers.type == 'test'" class="material-icons md-avatar-icon">textsms</i>
<i ng-show="numbers.type == 'CELL' || numbers.type == 'EXT'" class="material-icons md-avatar-icon">phone</i>
<div class="md-list-item-text" ng-class="{'md-offset': phone.options.offset }">
<h3> {{ numbers.type }} </h3>
<p> {{ numbers.value }} </p>
</div>
<i class="material-icons md-avatar-icon add-rm-icon margin-right" ng-click="arrayText.push(numbers);">add</i>
</md-list-item>
You can use:
<div ng-repeat="item in items | filter:{visible: true} | limitTo: 50">
<p>{{item.id}}</p>
</div>
{visible- true} will return a list of all visible items
You can take a look at the angularjs docu for more information on the filter filter. http://docs.angularjs.org/api/ng.filter:filter
I have this code:
<div class="item item-icon-right">
<input class="search" type="text" placeholder="search..." ng-model="searchText">
<button class="icon ion-search button-clear button-dark"></button>
</div>
<ion-item ng-repeat="service in services | filter:{service_category_id:category_selected.id} | filter:{name:searchText} | filter:criteriaMatch(criteria)"
class="item-remove-animate item-icon-right" type="item-text-wrap" href="#" ng-class='determineSelect(service.level)'>
{{service.name}}
<button class="icon ion-ios-arrow-right button-clear button-dark" ng-click="selectParent(service)"></button>
<ion-option-button ng-show = "services_selected.indexOf(service.id)==-1" class="button-energized" ng-click="addInterest(service)">
Add
</ion-option-button>
</ion-item>
As you can see, in ng-repeat section I have 3 filters, but what I want is when I start typing in the input(which also is a filter) all the filters in the ng-repeat section turn off, ans just the filter about the searchText(which is in ng-repeat also) turn on.
Thank you very much!! :D
you need to implement your own filter and pass a variable to enable o disable it.
function conditionalFilter() {
return function(data, searchIsEmpty) {
if(searchIsEmpty){
//filter your data, you can inject $filter angular built-in
return filteredData
}
return data
}
}
Then in your HTML, pass searchText as variable to the filters, if search text is not empty, your filters will be off.
<ion-item ion-item ng-repeat="service in services | conditionalFilter:{service_category_id:category_selected.id}:searchText | conditionalFilter:{name:searchText}:searchText | filter:criteriaMatch(criteria)"
class="item-remove-animate item-icon-right" type="item-text-wrap" href="#" ng-class='determineSelect(service.level)'>
I have a collapsible accordion using ng-repeat to render its options. On the right there is a downward facing glyphicon. This glyphicon should become upward facing once the job is clicked and expanded.
Update: Using Amine's response, the clicked header gets a glyphicon-down as it should be. But when collapsed and clicked outside, the glyphicon stays downward as the index is set and actually needs to become upward facing again when collapsed. How can I set $index to undefined again when the item is clicked again?
My code:
<div class="col span_2_of_3">
<div ng-repeat="item in jobs">
<accordion>
<accordion-group ng-click="state.selected = $index">
<accordion-heading>
<h2>
"{{item.title}}"
<i class="pull-right glyphicon "
ng-class="{'glyphicon-chevron-up': $index == state.selected,
'glyphicon-chevron-down': $index != state.selected }"
ng-click="state.selected = $index"
></i>
</h2>
</accordion-heading>
{{item.description}}
</accordion-group>
</accordion>
</div>
</div>
In my controller I have:
$scope.state = { selected: undefined };
You're not removing the glyphicon-chevron-down class when you click on the element. You end up with an element that has both classes ; whatever CSS rule comes last will be applied.
Try this :
<i class="pull-right glyphicon "
ng-class="{'glyphicon-chevron-up': $index == state.selected,
'glyphicon-chevron-down': $index != state.selected }"></i>
Here is a fiddle showing a solution (note that I have removed the ng-click binding on the icon as that's already handled by the accordion-group).