2016-12-13 7 views
1

がテーブルにネストされている場合、AngularJS 1.6.0(以前のバージョンと同じ)とngRepeatディレクティブに奇妙な問題があります()。テーブル内の要素としてngRepeatが機能しない

<ng-repeat><table>に入力してから、<tr>を内部に挿入します。機能しません。 <ng-repeat><table>の外に置くと、たとえば、内部には<div>があり、完全に動作します。

私たちのバグの場合、レンダリングされたHTMLを検査するとき、我々はNGリピートの反復を見ることができますが、彼らはこのようにDOM破壊となってラインが消え、テーブルの外に行く:

<p>When placed inside a table, with tr inside, it doesn't work:</p> 
    <!-- ngRepeat: person in people --><ng-repeat ng-repeat="person in people" class="ng-scope"> 
     </ng-repeat><!-- end ngRepeat: person in people --><ng-repeat ng-repeat="person in people" class="ng-scope"> 
     </ng-repeat><!-- end ngRepeat: person in people --><ng-repeat ng-repeat="person in people" class="ng-scope"> 
     </ng-repeat><!-- end ngRepeat: person in people --> 
<table> 
    <tbody> 
    <tr> 
     <td class="ng-binding"></td> 
    </tr> 
    </tbody> 
</table> 

はテスト済み最新のChromeとFirefoxで。

angular.module('myApp', []) 
 

 
.controller('MyCtrl', function($scope) { 
 
    $scope.people = [{ 
 
    name: 'John', 
 
    age: 20 
 
    }, { 
 
    name: 'Peter', 
 
    age: 22 
 
    }, { 
 
    name: 'Jane', 
 
    age: 19 
 
    }]; 
 
});
<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script> 
 
    <meta charset=utf-8 /> 
 
    <title>ngRepeat</title> 
 
</head> 
 

 
<body> 
 

 
    <div ng-controller="MyCtrl"> 
 
    <p>Hello ng-repeat!</p> 
 

 
    <p>With div inside, ng-repeat element works:</p> 
 
    <ng-repeat ng-repeat="person in people"> 
 
     <div> 
 
     <td>{{person.name}}</td> 
 
     </div> 
 
    </ng-repeat> 
 

 
    <p>When ng-repeat element is placed inside a table, with tr inside, <strong>it doesn't work</strong>:</p> 
 
    <table> 
 

 
     <ng-repeat ng-repeat="person in people"> 
 
     <tr> 
 
      <td>{{person.name}}</td> 
 
     </tr> 
 
     </ng-repeat> 
 

 
    </table> 
 
    
 
    <p>But, when ng-repeat is used as an attribute on tr, it works!</p> 
 
    <table> 
 

 
     <tr ng-repeat="person in people"> 
 
      <td>{{person.name}}</td> 
 
     </tr> 
 

 
    </table> 
 
    
 
    
 

 
    </div> 
 
</body> 
 

 
</html>

私が何かを見逃していましたか?

答えて

3

ng-repeatは、tableタグの有効な要素ではありません。ブラウザは、認識されない属性については不平を言うことはありません。

trtbodytheadは、テーブルタグの有効な要素です。

ここでは、テーブル内のng-repeatをtbodyに変更します。だからそれは動作します。

angular.module('myApp', []) 
 

 
.controller('MyCtrl', function($scope) { 
 
    $scope.people = [{ 
 
    name: 'John', 
 
    age: 20 
 
    }, { 
 
    name: 'Peter', 
 
    age: 22 
 
    }, { 
 
    name: 'Jane', 
 
    age: 19 
 
    }]; 
 
});
<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script> 
 
    <meta charset=utf-8 /> 
 
    <title>ngRepeat</title> 
 
</head> 
 

 
<body> 
 

 
    <div ng-controller="MyCtrl"> 
 
    <p>Hello ng-repeat!</p> 
 

 
    <p>With div inside, ng-repeat element works:</p> 
 
    <ng-repeat ng-repeat="person in people"> 
 
     <div> 
 
     <td>{{person.name}}</td> 
 
     </div> 
 
    </ng-repeat> 
 

 
    <p>When ng-repeat element is placed inside a table, with tr inside, <strong>it doesn't work</strong>:</p> 
 
    <table> 
 

 
     <tbody ng-repeat="person in people"> 
 
     <tr> 
 
      <td>{{person.name}}</td> 
 
     </tr> 
 
     </tbody> 
 

 
    </table> 
 
    
 
    <p>But, when ng-repeat is used as an attribute on tr, it works!</p> 
 
    <table> 
 

 
     <tr ng-repeat="person in people"> 
 
      <td>{{person.name}}</td> 
 
     </tr> 
 

 
    </table> 
 
    
 
    
 

 
    </div> 
 
</body> 
 

 
</html>

+0

あなたは、私が言いたかった何を言いました! 'thead'、' tbody'と 'tr'以外の要素は' table'の中に許されません。また、醜いハックはCSSを介してそこにありますが、意味論ではありません。 'tr'の代わりに' ngrepeat'タグを使い 'display:table-row'属性を追加することができます。 – Ravimallya

+0

はすでに@Ravimallyaでした:) – Sankar

+0

ありがとう、私はそれを恐れていました。 tbodyでngRepeatを使うのは良い解決策ですが、必要なのはngRepeatをtrの要素として使い、内部にtdを入れることです。 trはtd/th以外の子供を受け入れないので、同じ問題があります。この時点では回避策はありません(ng-repeatを属性として使用する場合を除きます)。 –

関連する問題