Question

所以我试图在angularjs中创建一个简单的选项卡系统，但每当我尝试绑定数据时，点击我模板的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中的简单制表系统错误

1 个答案: