AngularJS Error: [$parse:syntax] Syntax Error: Token ',' is unexpected, expecting []] at column 92 of the expression

Question

I'm new to AngularJS. I'm using carousel inside the tab and I used the angular-responsive for making the images responsive across the devices(http://plnkr.co/edit/QhBQpG2nCAnfsb9mpTvj?p=preview). I want to attach a class called 'active' to for the first tab by default if the tab name is 'All products'. To achieve this I have added the ng-class attribute as below:

<div id="category_list" ng-controller="MainContorller">
  <div class="display-mode" dn-display-mode="displayMode"></div>
  <div ng-controller="CategoryListController">
    <uib-tabset active="activeTab">
      <uib-tab index="$index" ng-repeat="prodCategory in productsByCategory" heading="{{prodCategory.slideName}}" ng-class="{'active': prodCategory.slideName == 'All products'}">
        <div>
          <div style="height: 305px">
            <div uib-carousel active="activeCarousel" interval="myInterval" no-wrap="noWrapSlides">
              <div uib-slide ng-repeat="slideCollection in prodCategory.slides" index="$index">
                <div class="col-sm-3 col-lg-2">
                  <div class="product-box">
                    <div class="product-image"><img ng-src="{{slideCollection.image1.product.product_image.src}}"></div>                    
                  </div>
                </div>                
              </div>
            </div>
          </div>
        </div>
      </uib-tab>
    </uib-tabset>
  </div>
</div>

AngularJS version : 1.3.4

This shows the following error:

Error: [$parse:syntax] Syntax Error: Token ',' is unexpected, expecting []] at column 92 of the expression [{'active': prodCategory.slideName == 'All products' } [{active: active, disabled: disabled}, classes]] starting at [, classes]].

Community · Accepted Answer · 2017-05-23 12:07:16Z

1

OK according to this topic you are not able to use ng-class directly on uib-tabset but you can do this

   <uib-tab-heading ng-class="{'tab-all-products': prodCategory.slideName == 'All products'}">
      <span>{{prodCategory.slideName}}</span>
    </uib-tab-heading>

and it will work fine :-) Here is Plnkr with working example.

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Oct 5, 2016 at 9:07

Marek Pavelek

1,14712 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marek Pavelek · Accepted Answer · 2016-10-05 07:28:13Z

0

You have some problem in your directive uib-tab. I tried to simulate your problem and when you replace that directive with a span it works so there is no problem with ng directives. If you can please post your directive here.

btw i created Plnkr

answered Oct 5, 2016 at 7:28

Marek Pavelek

1,14712 silver badges12 bronze badges

1 Comment

San Over a year ago

Thank you for your effert! I have updated my question. I'm trying to use carousel inside the tabs with responsive feature.

Collectives™ on Stack Overflow

AngularJS Error: [$parse:syntax] Syntax Error: Token ',' is unexpected, expecting []] at column 92 of the expression

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related