14

条件に基づいてマークアップに何かを追加することは可能ですか？tdこの例のように、最初の反復のみに追加したい場合（の最初の要素のみmyData）？

<tr ng-repeat="m in myData">
   <td>{{m.Name}}</td>
   <td>{{m.LastName}}</td>

   @if myData.indexOf(m) = 0 then // something like that
   <td rowspan ="{{m.length}}">
      <ul>
        <li ng-repeat="d in days">
           {{d.hours}}
        </li>
      </ul>
   </td> 
</tr>
4

2 に答える 2

16

はい、AngularJSにはこの機会に2つのディレクティブがあります。

  • ディレクティブのng-show / ng-hideファミリーを使用して、式の評価結果に基づいてDOM 3の一部を（表示CSSルールを使用して）非表示にすることができます。
  • DOMの一部を条件付きで物理的に削除/追加する場合は、ng-switchディレクティブのファミリー（ng-switch、ng-switch-when、ng-switch-default）が便利です。

結局のところ、両方のソリューションは同じ視覚効果をもたらしますが、基礎となるDOM構造は異なります。単純なユースケースの場合、ng-show / ng-hideはおそらく問題ありませんが、DOMの大部分はng-switchで処理する必要があります。

この質問のユースケースでは、ng-switchの使用をお勧めします。

于 2012-11-19T20:17:42.013 に答える
3

最善の解決策は次のとおりです。

<tr ng-repeat="m in myData">
   <td>{{m.Name}}</td>
   <td>{{m.LastName}}</td>

   <td ng-if="$first" rowspan="{{myData.length}}">
       <ul>
           <li ng-repeat="d in days">
               {{d.hours}}
           </li>
       </ul>
   </td> 
</tr>
于 2014-10-17T08:15:55.940 に答える