0

我正在尝试实现一个简单的 ng-click，当用户在第一个实例中单击链接时会显示某些内容，在第二个实例中，显示的相同内容现在被隐藏了。

这是我的html：

<table>
<tbody ng-repeat-start="history in HistoryByCategory.HistoryByCategory[key]">
    <tr>
        <th>{{ history.CompanyName}}</th>
        <td ng-repeat="storyone in history.Histories.slice(1, 12)">
                {{ storyone.value }}
        </td>

    </tr>
</tbody>
<tbody ng-repeat-end>
    <tr>
        <th ng-model="collapsed" ng-click="collapsed=!collapsed"><a>13 - 24 months</a>

            <!-- <div ng-show="collapsed">
            When placed ng-show in here, shows/hides fine.
            </div> -->

        </th>

        <td ng-repeat="historyone in history.Histories.slice(12, 24)" ng-show="collapsed">
            {{ historyone.value }}
        </td>                               
    </tr>
</tbody>
</table>

由上可知，当用户点击时：

<th ng-model="collapsed" ng-click="collapsed=!collapsed"><a>13 - 24 months</a></th>

应显示/隐藏以下内容：

<td ng-repeat="historyone in history.Histories.slice(12, 24)" ng-show="collapsed">
            {{ historyone.value }}
        </td>

但是，这不起作用。

然而，如果我放置：

<div ng-show="collapsed">
            When placed ng-show in here, shows/hides fine.
            </div>

在我的内部tr，这DIV显示和隐藏。

4

1 回答 1

0

您可以在 jquery 的帮助下使用指令：效果slideToggle：

  .directive('showhide', function ( ) {
    return {
      showhide: "=",
      link: function(scope, elem, attrs) {
            var link = $('th');
            link.click(function() {
                $('td').slideToggle('slow');
            });     
      }
    };
  })

或“范围”变量（例如“显示”）来存储可见性：

<th ng-click="show=!show"><a>13 - 24 months</a></th>

<div ng-if="show">
    <td ng-repeat="historyone in history.Histories.slice(12, 24)"> {{ historyone.value }} </td>
<div>
于 2016-07-21T09:50:47.607 回答