Grouping filter causing

[Matt Raible]

Hello all,

I've done some googling on grouping errors with ng-repeat, but I've
found nothing that solves my problem, so I'm asking here. I'm trying
to use an array of "widgets" to build up a Bootstrap Carousel.

http://rc.getbootstrap.com/javascript.html#carousel

Below is a mockup I've made that works well for what I'm trying to
accomplish. You might notice that rather than including one item in an
"item" div, I'm including two:

<div id="chartCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0"
class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" class=""></li>
<li data-target="#myCarousel" data-slide-to="2" class=""></li>
</ol>

<div class="carousel-inner">
<div class="item active">
<div class="widget">widget1</div>
<div class="widget">widget2</div>
</div>
<div class="item">
<div class="widget">widget3</div>
<div class="widget">widget4</div>
</div>
<div class="item">
<div class="widget">widget5</div>
<div class="widget">widget6</div>
</div>
</div>
<a class="left carousel-control" href="#chartCarousel" data-
slide="prev">‹</a>
<a class="right carousel-control" href="#chartCarousel" data-
slide="next">›</a>
</div>

After porting this to Angular, I end up with the following HTML:

<div id="chartCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#chartCarousel" ng-repeat="widget in widgets
| filter: {type: 'chart'} | groupBy"
data-slide-to="{{$index}}" ng-class="{active: $index ==
0}"></li>
</ol>

<div class="carousel-inner">
<div class="item" ng-repeat="widget in widgets | filter:
{type: 'chart'} | groupBy" ng-class="{active: $index == 0}">
<div class="widget">{{widget[0].title}}</div>
<div class="widget">{{widget[1].title}}</div>
</div>
</div>

<a class="left carousel-control" href="#chartCarousel" data-
slide="prev">‹</a>
<a class="right carousel-control" href="#chartCarousel" data-
slide="next">›</a>
</div>

The groupBy filter is defined as:

angular.module('dashboard.filters', []).
filter('groupBy', function () {
return function (input) {
var groupedItems = [];
$.each(input, function(index, item) {
if (index % 2 == 0) {
var group = [];
group.push(item);
if (index + 1 < input.length) {
group.push(input[index + 1]);
}
groupedItems.push(group);
}
});

return groupedItems;
}
});

This all works like I want it to in Chrome, but I end up with errors
in my console.

Error: 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations:

Is there a better way to write my groupBy filter or is there something
else I can use in order to group an array of items?

Thanks,

Matt

[Matt Raible]

[Pawel Kozlowski]

Hi Matt,

There was a topic about grouping in filter some time ago, linking it
here since it was a bit longish:
https://groups.google.com/forum/#!topic/angular/IEIQok-YkpU
In short - changing data model structure in a filter needs some care
and attention and usually might be not the best approach.

As for the bootstrap's carousel - there is one implementation already
in the angular-ui repo, demo here:
http://angular-ui.github.com/bootstrap/
and sources here:
https://github.com/angular-ui/bootstrap/tree/master/src/carousel
done by awesome Andy Joslin from this community. Might be an approach
you want to look into (and contribute back if you see better
approach!).

Hope this helps,
Pawel

> --
> You received this message because you are subscribed to the Google Groups "AngularJS" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
> To post to this group, send email to ang...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en-US.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>



--
Question? Send a fiddle
(http://jsfiddle.net/pkozlowski_opensource/Q2NpJ/) or a plunk
(http://plnkr.co/)
Need help with jsFiddle? Check this:
http://pkozlowskios.wordpress.com/2012/08/12/using-jsfiddle-with-angularjs/

Looking for UI widget library for AngularJS? Here you go:
http://angular-ui.github.com/

[Matt Raible]

On Tuesday, January 29, 2013 3:39:27 PM UTC-7, Pawel Kozlowski wrote:

Hi Matt,

There was a topic about grouping in filter some time ago, linking it
here since it was a bit longish:
https://groups.google.com/forum/#!topic/angular/IEIQok-YkpU
In short - changing data model structure in a filter needs some care
and attention and usually might be not the best approach.

Thanks for the link. Using the "chunk" filter from Ole (last message in the thread) worked great for me.

 

As for the bootstrap's carousel - there is one implementation already
in the angular-ui repo, demo here:
http://angular-ui.github.com/bootstrap/
and sources here:
https://github.com/angular-ui/bootstrap/tree/master/src/carousel
done by awesome Andy Joslin from this community. Might be an approach
you want to look into (and contribute back if you see better
approach!).

The RC for Bootstrap seems to contain indicators (http://rc.getbootstrap.com/javascript.html#carousel), while the Angular one doesn't. Maybe I'm missing something? Regardless, it's great to see it in Angular UI and I'll definitely take a stab at trying it.

 

Hope this helps, 

Pawel

It definitely does - thanks!
 

[Matt Raible]

On Jan 30, 9:44 am, Matt Raible <mrai...@gmail.com> wrote:
> On Tuesday, January 29, 2013 3:39:27 PM UTC-7, Pawel Kozlowski wrote:
>
> > Hi Matt,
>
> > There was a topic about grouping in filter some time ago, linking it
> > here since it was a bit longish:
> >https://groups.google.com/forum/#!topic/angular/IEIQok-YkpU
> > In short - changing data model structure in a filter needs some care
> > and attention and usually might be not the best approach.
>
> Thanks for the link. Using the "chunk" filter from Ole (last message in the
> thread) worked great for me.
>

OK, now that I have chunking working - I've discovered a new issue.

As I mentioned before, I'm using Bootstrap's Carousel to create a
dashboard that shows a bunch of Highcharts widgets. I've successfully
implemented it so 1 chart shows up and used the "chunk" filter to
show 2 widgets at a time. This all works great, but I'd like to
enhance things:

1. If the user has a screen size big enough to fit 2 charts, show 2
charts and paginate by 2.
2. If the user has a small screen size that only fits 1 chart, show 1
and paginate by 1.
3. If the user has a screen size < 2 up, but > 1, show 1.5 charts and
paginate by 1.

Using JavaScript, I was able to accomplish #3. For #1 and #2, I'm
rendering two different sections (with classes .oneup and .twoup) and
showing/hiding them based on screen size. It'd be nice if I didn't
have to render both oneup and twoup, but I'm not sure how to do that
with AngularJS. Here's my oneup ng-repeat:

<div class="carousel-inner">
<div class="item chart"

ng-repeat="widget in widgets | filter: {type: 'chart'} |

orderBy: 'order'"

ng-class="{active: $index == 0}">

<chart class="widget" value="{{widget}}"
type="{{widget.chartType}}"></chart>
</div>
</div>

Versus the twoup ng-repeat:

<div class="carousel-inner">
<div class="item chart"

ng-repeat="widget in widgets | filter: {type: 'chart'} |

chunk: 2 | orderBy: 'order'"

ng-class="{active: $index == 0}">

<chart class="widget" value="{{widget[0]}}"
type="{{widget[0].chartType}}"></chart>
<chart class="widget" value="{{widget[1]}}"
type="{{widget[1].chartType}}"></chart>
</div>
</div>

Is it possible to render 1up or 2up in an ng-repeat based on some sort
of Angular magic?

Thanks,

Matt