simple tab system in Angularjs error

Question

So I'm trying to create a simple tab system in angularjs, but whenever I try to bind data on ng-click on the a or li tags of my template I get this error:

Syntax Error: Token '' {1} at column {2} of the expression [{3}] starting at [{4}].

I been searching for hours can't figure out what's causing the problem

here's my code:

    <div id="tabs">        
        <ul>
            <li ng-repeat="file in files" ng-click="tab = {{$index}}">
             <a href="#">{{file.file_name}}.{{file.file_extension}}</a>
            </li>
       </ul>
    </div>

                    <!-- tab container -->
   <div class="tab-content">
      <div class="tab" ng-repeat="doc in files" ng-show="tab == {{$index}}">
              {{doc.file_name}}.{{doc.file_extension}}
        </div>
  </div>

I have tried wrapping {{$index}} in single quotes, that fixes the problem but the tabs don't work when clicked.

Tom · Accepted Answer · 2015-03-06 19:55:26Z

1

You could move this out of the inline logic and into a function, for example $scope.setTabIndex, like so:

$scope.setTabIndex = function(index) {
  $scope.tab = index;
}

And then in your markup:

<li ng-repeat="file in files" ng-click="setTabIndex($index)">

And for the ng-show, just remove the curly braces around $index:

<div class="tab" ng-repeat="doc in files" ng-show="tab == $index">

Here's as jsBin

answered Mar 6, 2015 at 19:55

Tom

7,7401 gold badge26 silver badges49 bronze badges

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

Collectives™ on Stack Overflow

simple tab system in Angularjs error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related