Angular ng-repeat 不显示空对象属性

Question

我正在尝试在 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>

我不希望显示空属性：就像下面的第二个对象

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

我怎样才能做到这一点？谢谢

Answer 1

只需在tr下面添加一个条件：

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

或者，您也可以使用ng-show代替ng-if。两者都不会显示该行，唯一的区别是ng-if将从 DOM 中删除该空行，而ng-show将使用 CSS 类隐藏该行。

编辑：另外，我建议您将您的ng-repeat条件移至tr自身（如果您没有特定要求）。请参阅下面的工作示例：

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

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": ""
  }];
});

就像@Ved 评论/回答一样，如果引号之间有空格，您也可以像这样修改您的查询：

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

如果任何值未定义/为空，则不会有任何错误。