Bug in Guide/Tutorial

tutorials
1

Hello, walked through Guide Todo app. Works fine, except this line in app.js raises an error in Chrome:

 <item ng-repeat="project in projects" ng-click="selectProject(project)" ng-class="{active: activeProject == project}">

The error is:

Error: [$parse:syntax] Syntax Error: Token 'itemClass' is an unexpected token at column 36 of the expression [{active: activeProject == project} itemClass] starting at [itemClass].

Needless to say, changing the line to read:

<item ng-repeat="project in projects" ng-click="selectProject(project)">

makes the error go away. Can anybody explain why this is happening? Have I introduced an error somewhere else? Thanks!

Here’s the full code I have for app.js and index.html.

2

In addition, when deployed to cordova ios (simulator), the app exhibits a bug you don’t see on the desktop. Every time you switch projects, it adds a todo to the list, and doesn’t clear the previous todo’s. Here’s a video of this happening.

Any ideas on why this could be?

3

Hi @willkessler,

I just experienced this issue, after googled for sometimes i found nothing. But after check detail on the error, this is how to solve it:

ng-class="{active: activeProject == project};"

u need to added ; before the closing quote.

From my understanding this is because of ng-class accept function

appreciate if someone can explain more detail

Thank you
Andi

4

@lucius_andi Wow, yup that fixes the issue. Good call.

After looking at the Angular docs and searching on SO, i couldn’t find the answer, so I posted a question there. Let’s see if we can get an answer.

5

Am I correct in understanding that you guys are having this problem with the 0.9.18-alpha release?

If so, check out ionic-angular.js line 826. This is the ‘item’ directive. Looking at the template you see: <div class="item item-complex" ng-class="itemClass">

Removing the ng-class attribute and adding ‘itemClass’ to the normal class attribute seems to fix the problem, not only avoiding the errors but also making sure the code works at it should… I think :).

So that should be: <div class="item item-complex itemClass">

A colleague of mine figured this out so, thanks Bruno!

6

As Bart replied earlier, a solution could be to move the itemClass to the plain old class="... itemClass". But after wondering why the selector itemClass would be in the ng-class="" directive. We’ve found the itemClass selector is referenced to $scope.itemType.

So a solution to this problem could be changing ng-class="{active: activeProject == project}" to item-type="{{ activeProject == project && 'active' }}". The syntax for this expression seems a bit odd, but you can find an explanation on Angularjs if-then-else construction in expression (stackoverflow)

1 Like