Question

In this plunk用户应该可以点击三个链接中的一个。每个链接都有一个相关的div，当用户点击该链接时会显示该链接。此外，单击链接时，其颜色变为红色。

问题是其中一个链接（标记为Show 10）不起作用，div不显示且文本未变为红色。

请注意，plunk中的字段由Angular UI选项卡包装。如果删除了标签（see here），则问题就会消失。如何解决这个问题？

HTML（带标签的版本）

<div ng-controller="ctl">

      <uib-tabset style="height:500px">
          <uib-tab>
            <a href="javascript:void(0)" 
                     ng-style="{'color': showItem == 0 ? 'red' : 'blue' }" 
                     ng-click="showItem=0" >Show 0</a>
                     <br>
            <a href="javascript:void(0)" 
                     ng-style="{'color': showItem == 10 ? 'red' : 'blue' }" 
                     ng-click="displaySeries()">Show 10</a>
                     <br>
            <a href="javascript:void(0)" 
                    ng-style="{'color': showItem == 20  ? 'red' : 'blue' }"
                    ng-click="showItem=20" >Show 20</a>
             <div ng-show="showItem==0">
                   zero
             </div>
            <div ng-show="showItem==10">
                   ten
             </div>
             <div ng-show="showItem==20">
                   twenty
             </div>
           </uib-tab>
       </uib-tabset>
</div>

Javascript（带标签的版本）

var app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);

app.controller('ctl', function ($scope) {
      $scope.showItem = 10;

      $scope.displaySeries = function(){
            $scope.showItem = 10;
      };    

});

Answer 1

在该a代码中，您错过了输入ng-click="showItem=10"（目前您有ng-click="displaySeries()"）

使用Angular UI选项卡时出现奇怪的行为

1 个答案: