所以我正在尝试在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