2017-09-13 50 views
1

私はAngular 1の新機能です。APIからデータを取得して行に表示するテーブルを作成したいと思います。私は同じresourceIdで複数の行を表示したくないのですが、クリックする場所のドロップダウンを作成し、同様のresourceIdを持つすべての行が表示されることを考えました。Angularjs:3進演算子内のhtml要素を使用する

同じresourceIdを持つ行を非表示にするためにこのコードを記述しましたが、Angularが
の3進演算子にHTML要素を埋め込むように見えないため、これは機能しません。どうすれば達成できますか?

<tr ng-repeat="report in data"> 
{{report.resourceId === data[$index-1].resourceId ? 
//Empty row 
: 
<td>{{report.reportId}}</td> 
<td>{{report.resourceId}}</td> 
<td>{{report.reason}}</td> 
}} 
</tr> 

データ配列は、このようなものです:

data: [ 
    { 
    reportId: "12", 
    resourceId: "16241", 
    reason: null 
    }, 
    { 
    reportId: "18", 
    resourceId: "26387", 
    reason: "It is biased or written by someone in the company" 
    }, 
    { 
    reportId: "19", 
    resourceId: "26387", 
    reason: "It is irrelevant" 
    } 
] 

答えて

2

私が代わりに三項演算を使用してのあなたはng-if

<tbody ng-repeat="report in data"> 
<tr ng-if="report.resourceId !== data[$index-1].resourceId"> 

<td>{{report.reportId}}</td> 
<td>{{report.resourceId}}</td> 
<td>{{report.reason}}</td> 
</tr> 
<tr ng-if="report.resourceId === data[$index-1].resourceId"> 
    <td></td> 
<tr> 
</tbody> 

デモ

angular.module("app",[]) 
 
.controller("ctrl",function($scope){ 
 

 
$scope.arr = {data: [ 
 
    { 
 
    reportId: "12", 
 
    resourceId: "16241", 
 
    reason: null 
 
    }, 
 
    { 
 
    reportId: "18", 
 
    resourceId: "26387", 
 
    reason: "It is biased or written by someone in the company" 
 
    }, 
 
    { 
 
    reportId: "19", 
 
    resourceId: "26387", 
 
    reason: "It is irrelevant" 
 
    } 
 
]} 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
<table> 
 
<tbody ng-repeat="report in arr.data"> 
 
<tr ng-if="report.resourceId !== arr.data[$index-1].resourceId"> 
 

 
    
 
<td>{{report.reportId}}</td> 
 
<td>{{report.resourceId}}</td> 
 
<td>{{report.reason}}</td> 
 
</tr> 
 
<tr ng-if="report.resourceId === arr.data[$index-1].resourceId"> 
 
    <td></td> 
 
<tr> 
 
</tbody> 
 
</table> 
 
</div>
を使用することができると思います10

+0

何らかの理由で、これは私のために働いていないようです。​​には依然として{{report .___}}が含まれていますか、 'this'のようなものを使用する必要がありますか?申し訳ありませんが、これはダンプと聞こえますが、角度になると私は騒ぎです。 –

+0

あなたは 'this'を使う必要はありません。あなたは 'data'配列を投稿してデモを作成することができます –

+0

データ配列 –

関連する問題