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

simple tab system in Angularjs error

本文关键字：选项 系统 简单 错误 Angularjs      更新时间：2023-09-26

所以我正在尝试在angularjs中创建一个简单的选项卡系统，但是每当我尝试在ng上绑定数据时单击模板的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}}括在单引号中，这解决了问题，但是单击选项卡时不起作用。

你可以把它从内联逻辑中移出来，移到一个函数中，例如 $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">

这里是 jsBin

相关文章：