javascript - Angular : using html elements within ternary operators

Question

我是 Angular 1 的新手，我想创建一个表，我在其中从 API 获取数据并将其显示在行中。我不想显示具有相同 resourceId 的多行，而是考虑创建一个下拉列表，我将在其中单击并显示具有相似 resourceId 的所有行。

我编写这段代码是为了隐藏具有相同 resourceId 的行，但这不起作用，因为 Angular 似乎没有
支持在三元运算符中嵌入 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>