Question

我试图在角度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本身（如果您没有具体要求）。请参阅下面的工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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

Answer 2

使用ng-if。这应该足够了：

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

Answer 3

您可以查看以下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>

Answer 4

如果任何字段在引号" "

之间有空格，则上述答案将失败

{

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

最好使用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>

Answer 5

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

您还可以使用默认值：

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

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

5 个答案: