テーブルに追加の行を表示する方法AngularJS

Question

ng-repeatに追加の行を挿入する方法はありますか？ここに問題があります。

<tr data-ng-repeat="user in content |pagination: currentPage*limit| limitTo: limit | filter: searchText "> 
      <td>{{user.imie}}</td> 
      <td>{{user.nazwisko}}</td> 
      <td>{{user.data_urodzenia}}</td> 
      <td>{{user.imie2}}</td> 
      <td>{{user.imie}}</td> 
      <td>{{user.imie}}</td> 
      <td><i ng-click="showDetails()" class="fa fa-plus-square" aria-hidden="true"></i></td> 
     </tr> 

私はこの表を繰り返しています。最後のセルには、ユーザーの詳細を表示する機能をトリガーするボタンがあります。だから私が必要なのは、提示された行の下に挿入された追加の行です。

<tr ng-repeat...></tr> 
<tr ng-show="details">additional data row</tr> 

とコントローラ

$scope.details = false; 
$scope.showDetails = function(){ 
    if (!details) { 
     $scope.details = true; 
    } 
    else { 
     $scope.details = false 
    } 
} 

これを行うにはどのような方法？いくつかのアプローチを試して、うまくいきませんでした。

Answer 1

、あなたはこの下の道

<tbody data-ng-repeat="user in content |pagination: currentPage*limit| limitTo: limit | filter: searchText "> 
     <tr> 
      <td>{{user.imie}}</td> 
      <td>{{user.nazwisko}}</td> 
      <td>{{user.data_urodzenia}}</td> 
      <td>{{user.imie2}}</td> 
      <td>{{user.imie}}</td> 
      <td>{{user.imie}}</td> 
      <td><i ng-click="showDetails()" class="fa fa-plus-square" aria-hidden="true"></i></td> 
     </tr> 
     <tr> 
      // your additional row 
     </tr> 
</tbody> 

そして、もう一つのような新しいtrタグ

にあなたの追加の行を使用することができ、あなたのコードは、tbody内のタグあなたのngのリピートを使用します完全に間違っている

$scope.details = false; 
$scope.showDetails = function(){ 
    if (!details) { 
     $scope.details = true; 
    } 
    else { 
     $scope.details = false 
    } 
} 

このコードはすべての行、特定の行を開きません。これでメンテナンスする必要がありますArray of $index

Answer 2

ng-repeatをtbodyに配置すると、スタイリングで問題が発生する可能性があります。

また、ng-repeat-start/endを使用することもできます。角度1.2では、かなりクールな要素を繰り返すことができます。

<tr ng-repeat-start="user in content |pagination: currentPage*limit| limitTo: limit | filter: searchText "> 
     <td>{{user.imie}}</td> 
     <td>{{user.nazwisko}}</td> 
     <td>{{user.data_urodzenia}}</td> 
     <td>{{user.imie2}}</td> 
     <td>{{user.imie}}</td> 
     <td>{{user.imie}}</td> 
     <td><i ng-click="showDetails()" class="fa fa-plus-square" aria-hidden="true"></i></td> 
    </tr> 
<tr ng-repeat-end ng-show="details">additional data row</tr> 

詳細情報here。

希望すると助かります！