javascript - AngularJS:在三元运算符中使用html元素

我对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"
  }
]

最佳答案

我认为可以使用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>

关于javascript - AngularJS:在三元运算符中使用html元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46194188/