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>
Related
I'm utilizing the following library in AngularJS... angular.filter
and I'm trying to ng-repeat on the following structure.
When I combine all three directives... groupBy, toArray: true, and fuzzy: search I get the following screen shot...
If I use just groupBy and toArray I the page renders properly..
<div class="grid" ng-repeat="(key, items) in schedule[0] | toArray: true | groupBy: 'bid'">
<div class="grid__column--12">
<h3 class="barber-name">{{key}}</h3>
{{key | json}}
<div class="card">
<div class="card__content">
<ul class="list list--unstyled" ng-repeat="item in items">
<li class="list__item">{{item.name}}</li>
</ul>
</div>
</div>
</div>
</div>
The code above don't have the fuzzy: search which allows the page to render properly.
How can I make all three work together groupBy, toArray: true, and fuzzy: search?
I solve the problem with the following code...
<div class="grid" ng-repeat="(key, items) in schedule[0] | toArray: true | groupBy: 'bid' | searchField: 'bid' | filter: search">
<div class="grid__column--12">
<h3 class="barber-name">{{items[0].bid}}</h3>
<!--{{key | json}} {{items | json}}-->
<div class="card">
<div class="card__content">
<ul class="list list--unstyled" ng-repeat="item in items">
<li class="list__item">{{item.name}}</li>
</ul>
</div>
</div>
</div>
</div>
I was missing the index [0] in the following line of code <h3 class="barber-name">{{items[0].bid}}</h3>
I have the following code, I want to add 1 to the current index of the second Name, because if I don't, it will output the same name in a single line. How do I add to the current index of ngRepeat?
<ul id="speakerlist" ng-repeat="data in result">
<li>
<div class="col">
<h3>{{data.Name}}</h3>
</div >
<div class="col">
<h3>{{data.Name | $index+1}}</h3>
</div>
</li>
</ul>
I solved this by using jQuery, but I want to do it in angularjs way.
EDIT: additional info
var app=angular.module("myApp",[])
app.controller("myController",function($scope){
$scope.result=[{"Name":"Michael Jordan"},{"Name":"Kobe Bryant"},{"Name":"Kevin Durant"},{"Name":"Stephen Curry"} ];
});
The result I want Is:
Michael Jordan Kobe Bryant
Kevin Durant Stephen Curry
If I understand correctly, you want to display a li for every two items. You can do it something like this:
<ul id="speakerlist" ng-repeat="data in result">
<li ng-if="$even">
<div class="col">
<h3>{{result[$index].Name}}</h3>
</div >
<div class="col">
<h3>{{result[$index + 1].Name}}</h3>
</div>
</li>
</ul>
Of course you would also have to include some kind of check if the $index can reach the last one (if the collection has an un-even amount of items)
See this jsfiddle
You could even remove the double col html if you don't like duplicate html code:
<ul id="speakerlist" ng-repeat="data in result">
<li ng-if="$even">
<div class="col"
ng-repeat="item in [result[$index], result[$index + 1]]">
<h3>{{item.Name}}</h3>
</div >
</li>
</ul>
Try this code <h3>{{data.Name }} {{$index+1}}</h3> instead of your code
<h3>{{data.Name | $index+1}}</h3>
The result format looks like
Ramesh
Ramesh1
Rajendran
Rajendran1
I think you can make it simple this way.
var app=angular.module("myApp",[])
app.controller("myController",function($scope){
$scope.result=[{"Name":"hari"},{"Name":"ram"} ];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myController">
<ul id="speakerlist" ng-repeat="data in result track by $index">
<li>
<div class="col">
<h3 >{{data.Name}} {{data.Name+1 }}</h3>
</div >
</li>
</ul>
</body>
">
Why don't you do this ?
<ul id="speakerlist" >
<li ng-repeat="data in result">
<div class="col">
<h3>{{data.Name}}</h3>
</div >
</li>
</ul>
This way you don't need to change de $index, it will be automatic
I am trying to call an API but I get the Not an array error when I load the page. The data from the JSON isn't showing up.
This is the section of the code that has the issue:
<div class="row" style="margin-top: 20px">
<div class="col-sm-6">
<h4>TESTCASES</h4>
<div ng-repeat="school in schools | filter: {selected: '!true'} track by $index">
<span class="list-group-item" ng-click="school.status =!school.status" style="background-color:rgba(115,158,226,1);">{{school.name}}</span>
<span class="list-group-item" ng-if="school.status" ng-repeat="subSchool in school.sub | filter: {selected: '!true'} track by $index" ng-click="select(subSchool)" tooltip= '{{subSchool.name}}, Run Time: {{subSchool.runTime}}'>{{subSchool.name}}</span>
</div>
</div>
<div class="col-sm-6">
<h4>TEST PLAN</h4>
<div class="list-group list-select">
<span class="list-group-item" ng-repeat="school in selected track by $index" ng-click="deselect(school)">{{school.name}}</i></span>
</div>
</div>
</div>
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>
<li ng-repeat="Item in Items">
<div ng-switch="($index)==0">
<div ng-switch-when="true">
< Previous
</div>
<div ng-switch-when="false">
{{$index}}
</div>
</div>
</li>
I want to get element count of the Items and want to show "Next >" for last item
Something like this
<li ng-repeat="Item in Items">
<a ng-if="$first" href="#">< Previous</a>
<a ng-if="!$first && !$last" href="#">{{$index}}</a>
<a ng-if="$last" href="#">Next ></a>
</li>
To get the length use Items.length. It becomes more complex if there is a filter. See this SO post