Angularjs : using html elements within ternary operators

Question

I am totally new to Angular 1, I want to create a table where I am fetching data from an API and displaying it in rows. I don't want to display multiple rows with the same resourceId instead I have thought about creating a drop-down where I'll click and all the rows with similar resourceId will appear.

I have written this code inorder to hide the rows with the same resourceId, but this isn't working because Angular doesn't seem to
support embedding html elements in ternary operators. How can I achieve it?

<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>

The data array is like this:

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

Sachila Ranawaka · Accepted Answer · 2017-09-13 10:23:46Z

2

I think instead of using ternary operation you can use 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>

Demo

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>

edited Sep 13, 2017 at 10:23

answered Sep 13, 2017 at 9:50

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Manav Saxena Over a year ago

For some reason this doesn't seem to be working for me. Will the <td>s still contain {{report.___}} or do I need to use something like 'this'. Sorry if this sounds dump, I am a noob when it comes to angular

Sachila Ranawaka Over a year ago

you do not need to use the this. can you post the data array so i can create a demo

Manav Saxena Over a year ago

Added the data array

Sachila Ranawaka Over a year ago

use tbody instead of div. check the demo

Collectives™ on Stack Overflow

Angularjs : using html elements within ternary operators

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related