I need some help figuring out how to make avoid repeating a divider while applying a filter.
<div class="list">
<div ng-repeat="record in records| orderBy : 'Type' | filter: query">
<div class="item item-divider item-dark"
ng-if="record.Type != records[$index-1].Type">
{{record.Type}}
</div>
<div class="card">
...
Working fine when not filtering
Not working when filtering
Staying with your setup, I think the simplest way to go is:
<div class="list">
<div ng-repeat="record in filteredRecords = (records | orderBy : 'Type' | filter: query)">
<div class="item item-divider item-dark"
ng-if="record.Type != filteredRecords[$index-1].Type">
{{record.Type}}
</div>
<div class="card">
...
Note the newly defined filteredRecords
Related
This is my HTML code. What I need to do is this filter.
ng-repeat="p in planes | filter : { 'tipo_planes' : {{tt.id_tipo}} }"
{{tt.id_tipo}} is an expression from another scope than planes. Its equivalent in planes is 'tipo_planes'.
<div class="panel panel-default" ng-repeat="tt in tipoPlanes">
<div class="row collapse" id="collapse{{tt.id_tipo}}" data-parent="#plans">
<div class="col-lg-4 col-lg-offset-2 wow zoomIn plans" ng-repeat="p in planes | filter : {'tipo_planes' : {{tt.id_tipo}} }">
<ul class="pricing-plan list-unstyled selected">
<li class="pricing-title">{{p.nombre}}</li>
<li class="pricing-price"><span ng-if="p.precio_t">{{p.precio_t}}</span></li>
<li class="pricing-charac" ng-if="p.caracteristicas"><span>{{p.caracteristicas}}</span></li>
</ul>
</div>
</div>
</div>
This question is a little hard to explain so i will try with my actual code to show the example. I am using ng-repeat using the syntax "ng-repeat='a in achievements = ( | achievements entity is not defined until within the ng-repeat that is not an option. i am forced to place it AFTER the ng-repeat has ended. Is there a different way to accomplish this, to be able to reference the filtered contents of the object before or within the ng-repeat (but without having it actually repeated)
<div style="padding:10px;margin-bottom:10px;" ng-repeat="a in achievments =(userAchievementConfig.achievements
| filter:userAchievementConfig.filters.search
| filter:{UserTeam:userAchievementConfig.filters.team}
| filter:{UserDept:userAchievementConfig.filters.dept})"
ng-if="$index >= userAchievementConfig.startNum && $index <= userAchievementConfig.endNum">
<div ng-if="achievements.length == 0" class="alert alert-info text-center">No users match your current filter</div>
<div class="col-sm-2">
<img ng-if="a.picture" data-ng-src="data:image/png;base64,{{a.picture}}" border=0 class='img-rounded pull-left' style="max-height:125px;max-width:100%;" >
<div ng-if="!a.picture" style="height:125px;width:100%;padding:3px;background-color:#CCC;"></div>
</div>
<div class="col-sm-10">
<h4 ng-bind="a.UserName"></h4>
<span ng-bind="a.sComments"></span>
<br><i> - <span ng-bind="a.RequestedByName"></span> in <span ng-bind="a.timeSubmitted"></span></i>
</div>
<div class="clearfix"></div>
</div>
<div class="col-sm-6" ng-if="!userAchievementConfig.filters.search">
<ul uib-pagination total-items="userAchievementConfig.achievements.length" boundary-link-numbers="true" max-size="3" ng-model="userAchievementConfig.pageNum" class="pagination-sm nomargin" items-per-page="userAchievementConfig.itemsPerPage"></ul>
</div>
<div class="col-sm-6" ng-if="!userAchievementConfig.filters.search">
Showing {{userAchievementConfig.startNum+1}} - {{userAchievementConfig.endNum+1}} of {{userAchievementConfig.achievements.length}} achievements
</div>
<div class="clearfix"></div>
You can get filtered item without ng-repeat as below code
$scope.filteredItems = $scope.$eval("userAchievementConfig.achievements | filter:userAchievementConfig.filters.search | filter:{UserTeam:userAchievementConfig.filters.team}| filter:{UserDept:userAchievementConfig.filters.dept}");
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 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>
With something like the following:
<div class="row" ng-repeat="(k, v) in idata">
<div class="col-lg-6">
<h2>Network Bytes: {{k}}</h2>
<div class="chart" ts-rickshaw="v"></div>
</div>
</div>
Is there a way I could insert a row every X items (2 in this case since it is col-lg-6)? I'm aware I could probably change my data to be an array and do some logic in the controller. But ideally there should be a way to do this that keeps the view logic out of the controller.
I went with the ng-switch strategy suggested by #Skelly. However I modified it to make it more generic so I could avoid the code repetition for each column by adding a nested loop and referencing $parent.$index:
<div ng-repeat="i in fsdata track by $index" ng-init="rows = [1,2]">
<span ng-switch="" on="$index % rows.length">
<div class="row" ng-switch-when="0">
<div class="col-lg-{{12/rows.length}}" ng-show="fsdata[$parent.$index+$index]" ng-repeat="i in rows">
<h2>Disk: {{fsdata[$parent.$index+$index].name}} <small>({{fs_current[$parent.$index+$index].c_val | bytes}} / {{fs_current[$parent.$index+$index].total | bytes}}) {{fs_current[$parent.$index+$index].percent_used|number:0}}% Used</small></h2>
<div class="chart" max="{{fs_total[fsdata[$parent.$index+$index].name]}}" ts-rickshaw="fsdata[$parent.$index+$index].data"></div>
</div>
</div>
</span>
</div>
What about using $index and the modulus operator?
<div class="row" ng-repeat="(k, v) in idata">
<div class="col-lg-6">
<h2>Network Bytes: {{k}}</h2>
<div class="chart" ts-rickshaw="v"></div>
</div>
<div ng-if="($index != 0) && ($index % 2)">My Even Row</div>
</div>