0

最初のインスタンスでユーザーがリンクをクリックしたときに単純な ng-click を実装しようとしています。2 番目のインスタンスでは、表示されたものと同じものが非表示になります。

これが私の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>

my の中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');
            });     
      }
    };
  })

または、可視性を保存するための「スコープ」変数 (「show」など):

<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 に答える