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

{

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

},
{

    "qid": "173995X306X4101",
    "gid": null,
    "ments": "",
    "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>{{milestonements  }} </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

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

{

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

},
{

    "qid": "173995X306X4101",
    "gid": null,
    "ments": "",
    "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.ments  }} </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

• javascript
• angularjs
• angularjs-ng-repeat

• 2 try using ng-if that is what you need. – Manish Commented Jul 28, 2016 at 10:45
• You can use either ng-if or ng-show for this – Pankaj Kumar Commented Jul 28, 2016 at 10:47

5 Answers 5

Just add a condition in the tr as following:

<tr ng-if="milestone.ments && 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,
    "ments": "Milestone1: Here is the milestone1details",
    "owner": "Me",
    "targetdate": "28-10-2016"

  }, {

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

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./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.ments && milestone.owner && milestone.targetdate">
        <td>{{milestone.ments }}</td>
        <td>{{milestone.owner }}</td>
        <td>{{milestone.targetdate }}</td>
      </tr>
    </tbody>
  </table>

</div>

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

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

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

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.ments && milestone.owner && milestone.targetdate">
        <td>{{milestone.ments }}</td>
        <td>{{milestone.owner }}</td>
        <td>{{milestone.targetdate }}</td>
      </tr>

Use ng-if. This should be sufficient:

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

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

{

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

so better to use trim().

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

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.ments">{{milestone.ments  }}</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>