javascript - Angularjs 错误中的简单选项卡系统

Question

所以我试图在 AngularJS 中创建一个简单的选项卡系统，但是每当我尝试在 ng-click 模板的 a 或 li 标签上绑定(bind)数据时，我都会收到此错误:

语法错误:从 [{4}] 开始的表达式 [{3}] 的第 {2} 列有标记“{1}”。

我已经搜索了几个小时，无法找出导致问题的原因

这是我的代码:

    <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>

我尝试将 {{$index}} 用单引号引起来，这解决了问题，但单击时选项卡不起作用。

Answer 1

您可以将其移出内联逻辑并移至函数中，例如 $scope.setTabIndex，如下所示:

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

然后在您的标记中:

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

对于 ng-show，只需删除 $index 周围的大括号即可:

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

Here's作为jsBin