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>
私が何かを見逃していましたか?
あなたは、私が言いたかった何を言いました! 'thead'、' tbody'と 'tr'以外の要素は' table'の中に許されません。また、醜いハックはCSSを介してそこにありますが、意味論ではありません。 'tr'の代わりに' ngrepeat'タグを使い 'display:table-row'属性を追加することができます。 – Ravimallya
はすでに@Ravimallyaでした:) – Sankar
ありがとう、私はそれを恐れていました。 tbodyでngRepeatを使うのは良い解決策ですが、必要なのはngRepeatをtrの要素として使い、内部にtdを入れることです。 trはtd/th以外の子供を受け入れないので、同じ問題があります。この時点では回避策はありません(ng-repeatを属性として使用する場合を除きます)。 –