Question

我正在尝试实现一个简单的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显示并隐藏。

Answer 1

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

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

或＆＃34;范围＆＃34;变量（＆＃34;显示＆＃34;例如）来存储可见性：

<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>

AngularJS - ng点击2次点击不起作用

1 个答案: