0

With angular, I'm creating a slide show dynamically with 50+ slides in it. Now this effects the browser and slows a lot of things down. So I added an ng-class the slides to evaluate their index.

ng-class="currentSlide >= (currentSlide-1) && currentSlide <= (currentSlide+1) ? 'visible' : 'hidden'"

currentSlide is a variable that will return the current index of the slide when ever the slide chagnes, so it will always update.

I know currentSlide works, whats wrong is my ng-class expression. Is it possible to do the math, even if it is as simple as + 1, inside of the expression?

Or should I more this out to variables in my controller and get their value there?

mhartington
  • 6,905
  • 4
  • 40
  • 75
  • You shouldn't be coding in your view, it goes against the MVVM approach. The correct approach is move this operation to your controller or custom filter – Dalorzo May 20 '14 at 02:00
  • Works for me: http://plnkr.co/edit/Pcm9O0Awcv1fiELLcdB3?p=preview Are you using an old version of Angular (< 1.1.5)? – Marc Kline May 20 '14 at 02:13
  • So, you aren't seeing `visible` or `hidden` classes added to your element? – Marc Kline May 20 '14 at 02:32
  • Visible is being added, but not hidden when the slides are changed. But if I use static conditionals, `<= 1 ` etc, things works – mhartington May 20 '14 at 02:43
  • It seems that it would make sense that `"currentSlide >= (currentSlide-1) && currentSlide <= (currentSlide+1)"` would always evaluate to truthy, though, right? ... no matter what integer value `currentSlide` is ... (e.g. `(-1 >= -2) && (-1 <= 0) == true`, `(1 >= 0) && (1 <= 2) == true`) – Marc Kline May 20 '14 at 04:32
  • Ah I see now, since they're dynamic thats how they will behave...damn. See I started off doing this with the static ng-classes and wanted to to move it into dynamically filtering to make less work – mhartington May 20 '14 at 04:35
  • So the main purpose of this is to only be able to keep three slides visible at a time, the previous slide, current, and next slide. Here's a codepen http://codepen.io/mhartington/pen/kFhAp – mhartington May 20 '14 at 04:41
  • I think we're starting to stray far from the original question. Maybe you should ask a new question or else feel free to contact me privately. – Marc Kline May 20 '14 at 04:51

2 Answers2

0

Try this:

ng-class="{ 'visible': currentSlide >= (currentSlide-1) && currentSlide <= (currentSlide+1) }"

Related: AngularJS ngClass conditional

The ng-class conditional syntax doesn't seem to be written anywhere obvious.

Community
  • 1
  • 1
Matt Way
  • 32,319
  • 10
  • 79
  • 85
  • Seems to be the same expression as above but with out the conditional classes that I need. Plus when I used it in my example, the classes didn't update. – mhartington May 20 '14 at 01:53
  • you can add more by adding `,` between them. Also is currentSlide on the scope? – Matt Way May 20 '14 at 04:07
0

My ng-class wasn't working because I was getting the index according to the slide, not the ng-repeat.

 ng-show="$index >= (currentSlide-1) && $index <= (currentSlide+1)"

Using $index solved my problem. Thanks for the help all!

mhartington
  • 6,905
  • 4
  • 40
  • 75