CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Spdexter
Spdexter

Reputation: 933

Angular ng-repeat not show empty object attributes

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

Upvotes: 2

Views: 1128

Answers (5)

Shashank Agrawal
Shashank Agrawal

Reputation: 25797

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.

Upvotes: 5

Ved
Ved

Reputation: 12103

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>

Upvotes: 1

Pankaj Kumar
Pankaj Kumar

Reputation: 881

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>

Upvotes: 3

Victor T.
Victor T.

Reputation: 121

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>

Upvotes: 0

George Sharvadze
George Sharvadze

Reputation: 570

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

Upvotes: 2

Related Questions