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>
Related
I have looked at almost every solution I could find about this but I can't get my code to work. I wan't to put a banner after 3 ng-repeats
<div class="row products-row" ng-init="onInit()">
<div class="col col-34 fashion-product-container" ng-repeat="product in results = fashionProducts | FashionFilter:params | orderBy:sortby_obj.propertyName:sortby_obj.reverse as fashionResults">
<div class="list card">
<div class="item item-image product-image-wrapper">
<pre-img ratio="_3_4">
<img class="product-image" ng-src="{{ product.image }}" spinner-on-load>
</pre-img>
</div>
<div class="item item-body product-description-wrapper">
<h5 class="product-title">
{{ product.name }}
</h5>
<p class="product-description">
<b class="actual-price bold-price">${{product.price_sale}}</b>
<span class="previous-price bold-price" ng-show="product.price != '0'">${{product.price}}</span>
</p>
</div>
</div>
</div>
<div class="col-md-12" id="Banner" ng-if="$index==3">Banner</div>
</div>
use $index
like
<div id="banner" ng-show="$index == 3"></div>
Now this will show banner div when its the third element of ng-repeat.
Your <div class="col-md-12" id="Banner" ng-if="$index==3">Banner</div> is outside of <div> containing ng-repeat tag. due to that $index is undefined.
Just put it inside the div of ng-repeat and it will work.
Try this:-
<div class="row products-row" ng-init="onInit()">
<div ng-repeat="product in results = fashionProducts | FashionFilter:params | orderBy:sortby_obj.propertyName:sortby_obj.reverse as fashionResults">
<div class="col col-34 fashion-product-container">
<div class="list card">
<div class="item item-image product-image-wrapper">
<pre-img ratio="_3_4">
<img class="product-image" ng-src="{{ product.image }}" spinner-on-load>
</pre-img>
</div>
<div class="item item-body product-description-wrapper">
<h5 class="product-title">
{{ product.name }}
</h5>
<p class="product-description">
<b class="actual-price bold-price">${{product.price_sale}}</b>
<span class="previous-price bold-price" ng-show="product.price != '0'">${{product.price}}</span>
</p>
</div>
</div>
</div>
<div class="col-md-12" id="Banner" ng-show="$index==3">Banner</div>
</div>
</div>
I have problem with Bootstrap carousel in ng-repeat, because images are not load one by one if carousel changes, but all images are load all at onece. I found similar questions in stackoverflow, but in my case I loading data from database (not use $scope)
<div class="container">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-3" ng-repeat="product in main.products"><img ng-src="../../uploads/{{ product.imagePath }}" class="img-responsive"></div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-3" ng-repeat="product in main.products"><img ng-src="../../uploads/{{ product.imagePath }}" class="img-responsive"></div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
The issue is that you are repeating all of your images inside an item of the carousel. A carousel item is defined by the "item" class. If you want a single image to displayed at once then repeat the items like so:
<div class="container">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<!-- add the `active` class to the first item with one-time binding (if $index is 0) -->
<div class="item {{::($index === 0 ? 'active' : '')}}" ng-repeat="product in main.products track by $index">
<div class="row">
<div class="col-xs-3"><img ng-src="../../uploads/{{ product.imagePath }}" class="img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
Why doesnt the ng-disabled work in my code?
I have created a plunker.. any suggestions?
https://plnkr.co/edit/j2LnhLxBe5gHPITMqzUJ?p=preview
<ul ng-repeat="permission in permissions" ng-click="permission.assigned=!permission.assigned">
<a class="list-group-item" ng-class="{active: permission.assigned, disable: permission.name=='default'}">
<div class="row">
<div class="col-md-3">
<input type=checkbox aria-label="checkbox" ng-model="permission.assigned" ng-click="$event.stopPropagation()">
</div>
<div class="col-md-4">{{ permission.name }}</div>
<div class="col-md-6">{{ permission.description }}</div>
</div>
</a>
</ul>
Add the following to your input element - ng-disabled="permission.name === 'default'".
I have a plunker example with this plugin
Angular Multi Level Menu
Index.html
<input type="text" ng-model="search">
<wxy-push-menu menu="menu" options="options"></wxy-push-menu>
SubMenu.html
<div ng-show="visible" ng-class="{visible: visible, multilevelpushmenu_inactive: inactive && !collapsed}" class="levelHolderClass">
<h2><i class="floatRight cursorPointer" ng-class="menu.icon" ng-click="openMenu($event, menu)"></i>{{menu.title}}</h2>
<div ng-show="level != 0 && !inactive" ng-class="options.backItemClass">
<a href="#" ng-click="goBack($event, menu)">
<i class="floatRight" ng-class="options.backItemIcon"></i><span ng-bind="options.backText"></span>
</a>
</div>
<ul ng-class="{invisible: inactive}">
<li ng-repeat="item in menu.items | filter: search">
<a ng-href="{{item.link}}" ng-click="onSubmenuClicked(item, $event)">
<i ng-if="item.menu" class="floatLeft iconSpacing" ng-class="options.groupIcon"></i>
<i class="floatRight" ng-class="item.icon"></i>{{item.name}}
</a>
<div ng-if="item.menu">
<recursive><wxy-submenu menu="item.menu" level="childrenLevel" visible="item.visible"></wxy-submenu></recursive>
</div>
</li>
</ul>
Any idea why the filter not work?
Plunker Code
I have a ng repeat that displays upcoming activities. I want to show each month once. Is there a way to show the first repeated item with month and the other without?
In the attach image you'll see the current situation with duplicate month dividers. I only want to show the Months once and down that month all the items in that month. How i can hide these month duplicates?
<ul class="list">
<li ng-repeat="item in calendar | filter:searchText" >
<div class="item item-divider" ng-hide="what to do here?">{{item.month}}</div>
<div class="item item-text-wrap">
<span>{{item.day}}</span>
<span>{{item.title}}</span>
</div>
</li>
</div>
You can use groupBy filter of angular.filter module on ng-repeat and then use a second ng-repeat to loop through the grouped items.
<ul class="list" ng-repeat="(key, value) in calendar | groupBy: 'month'">
<li>{{ key }}</li>
<li ng-repeat="item in value | filter:searchText" >
<div class="item item-divider" ng-hide="what to do here?">{{item.month}}</div>
<div class="item item-text-wrap">
<span>{{item.day}}</span>
<span>{{item.title}}</span>
</div>
</li>
</ul>
Final working code provided by Maarten Heideman
<ul class="list" ng-repeat="maand in agenda | groupBy: 'maand' : 'agendamaand'">
<div class="item item-divider">{{ maand.maand }}</div>
<li ng-repeat="item in maand.items | filter:searchText">
<div class="item item-text-wrap">
<span class="time prio-{{item.prio}}">{{item.start}}</span>
<span>{{item.title}}</span>
</div>
</li>
</ul>