CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Raphael
Raphael

Reputation: 13

simple tab system in Angularjs error

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.

Upvotes: 0

Views: 121

Answers (1)

Tom
Tom

Reputation: 7740

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

Upvotes: 1

Related Questions