Angularjs：在三元運算符內使用html元素

Question

我對Angular 1是全新的，我想創建一個表，我從API中獲取數據並在行中顯示它。我不想用相同的resourceId顯示多行，而是考慮創建一個下拉列表，我將點擊它，並顯示所有具有類似resourceId的行。

我寫了這個代碼序來隱藏具有相同RESOURCEID行，但這不是工作，因爲角似乎並沒有在三元運營商
支持嵌入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" 
    } 
] 

Answer 1

我想用三元操作，而不是你可以使用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>