Angularjs 错误中的简单制表符系统

Question

因此，我尝试在 angularjs 中创建一个简单的选项卡系统，但每当我尝试在 ng-click 模板的 a 或 li 标签上绑定数据时，我都会收到此错误：

语法错误：从 [{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

Angularjs 错误中的简单制表符系统

simple tab system in Angularjs error

javascript

angularjs

angularjs-ng-repeat