Angular ng-repeat not show empty object attributes

Question

I am trying to loop through using the data below in angular ng-repeat

{

    "qid": "173995X306X4091",
    "gid": null,
    "comments": "Milestone1: Here is the milestone1details",
    "owner": "Me",
    "targetdate": "28-10-2016"

},
{

    "qid": "173995X306X4101",
    "gid": null,
    "comments": "",
    "owner": "",
    "targetdate": ""
}

HTML:

  <div class="modal-body" ng-repeat="milestone in milestones ">
    <table class="table table-striped">
        <thead>
        <tr>
            <th>Milestone </th>
            <th>Milestone Owner</th>
            <th>Milestone Target date</th>
        </tr>

        </thead>
        <tr>
            <td>{{milestone.comments  }} </td>
            <td>{{milestone.owner  }}</td>
            <td>{{milestone.targetdate  }}</td>
        </tr>
        </table>

</div>

I don't want the empty attributes to show : like the below for second object

   <table class="table table-striped">
        <thead>
        <tr>
            <th>Milestone </th>
            <th>Milestone Owner</th>
            <th>Milestone Target date</th>
        </tr>

        </thead>
        <tbody><tr>
            <td class="ng-binding"> </td>
            <td class="ng-binding"></td>
            <td class="ng-binding"></td>
        </tr>
        </tbody>
   </table>

How can I do this? Thanks

try using ng-if that is what you need.

Manish
– Manish

2016-07-28 10:45:12 +00:00
Commented Jul 28, 2016 at 10:45 — Manish
– Manish, Commented Jul 28, 2016 at 10:45
You can use either ng-if or ng-show for this

Pankaj Kumar
– Pankaj Kumar

2016-07-28 10:47:05 +00:00
Commented Jul 28, 2016 at 10:47 — Pankaj Kumar
– Pankaj Kumar, Commented Jul 28, 2016 at 10:47

Shashank Agrawal · Accepted Answer · 2016-07-28 11:59:06Z

5

Just add a condition in the tr as following:

<tr ng-if="milestone.comments && milestone.owner && milestone.targetdate">

Alternatively, you can also use ng-show instead of ng-if. Both will not display the row the only difference is that ng-if will remove that empty row from the DOM while the ng-show will hide that row using a CSS class.

Edit: Also, I suggest you moving your ng-repeat condition to the tr itself (if you do not have specific requirement). See a working example below:

var app = angular.module("sa", []);

app.controller("FooController", function($scope) {

  $scope.milestones = [{

    "qid": "173995X306X4091",
    "gid": null,
    "comments": "Milestone1: Here is the milestone1details",
    "owner": "Me",
    "targetdate": "28-10-2016"

  }, {

    "qid": "173995X306X4101",
    "gid": null,
    "comments": "",
    "owner": "",
    "targetdate": ""
  }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div ng-app="sa" ng-controller="FooController" class="container">
  <table class="table table-striped table-bordered">
    <thead>
      <tr>
        <th>Milestone</th>
        <th>Milestone Owner</th>
        <th>Milestone Target date</th>
      </tr>

    </thead>
    <tbody>
      <tr ng-repeat="milestone in milestones" ng-if="milestone.comments && milestone.owner && milestone.targetdate">
        <td>{{milestone.comments }}</td>
        <td>{{milestone.owner }}</td>
        <td>{{milestone.targetdate }}</td>
      </tr>
    </tbody>
  </table>

</div>

Like @Ved commented/answered, if there are space between quotes, you can also modify your query like this:

<tr ng-if="milestone.comments.trim() && milestone.owner.trim() && milestone.targetdate.trim()">

There will not be any error if any of the value is undefined/null.

edited Jul 28, 2016 at 11:59

answered Jul 28, 2016 at 10:44

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

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

2 Comments

Ved Over a year ago

This will not work if there is space between quotes.

Shashank Agrawal Over a year ago

Oh sorry, didn't saw you answer. Thanks for the update.

Pankaj Kumar · Accepted Answer · 2016-07-28 10:57:08Z

3

You can have a look at the following plunkr

https://plnkr.co/edit/BplBjwxISICLVV3nQzD9?p=preview

 <tr ng-repeat="milestone in milestones" ng-if="milestone.comments && milestone.owner && milestone.targetdate">
        <td>{{milestone.comments }}</td>
        <td>{{milestone.owner }}</td>
        <td>{{milestone.targetdate }}</td>
      </tr>

answered Jul 28, 2016 at 10:57

Pankaj Kumar

8815 silver badges12 bronze badges

Comments

George Sharvadze · Accepted Answer · 2016-07-28 10:46:05Z

2

Use ng-if. This should be sufficient:

<div class="modal-body" ng-repeat="milestone in milestones ">
   <table ng-if="milestone.comments" class="table table-striped">

answered Jul 28, 2016 at 10:46

George Sharvadze

5709 silver badges26 bronze badges

Comments

Ved · Accepted Answer · 2016-07-28 11:41:39Z

1

I more addition as the above answer will fail if any filed have empty space between like quotes " "

{

    "qid": "173995X306X4101",
    "gid": null,
    "comments": "",
    "owner": " ",
    "targetdate": " "
}

so better to use trim().

 <tr ng-repeat="milestone in milestones" ng-if="milestone.comments.trim() && milestone.owner.trim() && milestone.targetdate.trim()">
        <td>{{milestone.comments }}</td>
        <td>{{milestone.owner }}</td>
        <td>{{milestone.targetdate }}</td>
      </tr>

edited Jul 28, 2016 at 11:41

answered Jul 28, 2016 at 11:29

Ved

12.1k5 gold badges46 silver badges61 bronze badges

Comments

Victor T. · Accepted Answer · 2016-07-28 10:49:34Z

0

Using ng-show:

<div class="modal-body" ng-repeat="milestone in milestones ">
    <table class="table table-striped">
        <thead>
        <tr>
            <th>Milestone </th>
            <th>Milestone Owner</th>
            <th>Milestone Target date</th>
        </tr>
        </thead>
        <tr>
            <td><span ng-show="milestone.comments">{{milestone.comments  }}</span></td>
            <td><span ng-show="milestone.owner">{{milestone.owner  }}</span></td>
            <td><span ng-show="milestone.targetdate">{{milestone.targetdate  }}</span></td>
        </tr>
    </table>
</div>

You can also use a default value:

<span>{{milestone.owner || "No Owner"}}</span>

answered Jul 28, 2016 at 10:49

Victor T.

1213 bronze badges

Collectives™ on Stack Overflow

Angular ng-repeat not show empty object attributes

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related