角ng-重复不显示空对象属性
角ng-重复不显示空对象属性
提问于 2016-07-28 10:41:22
我试图循环使用下面的数据在角ng-重复。
{
"qid": "173995X306X4091",
"gid": null,
"comments": "Milestone1: Here is the milestone1details",
"owner": "Me",
"targetdate": "28-10-2016"
},
{
"qid": "173995X306X4101",
"gid": null,
"comments": "",
"owner": "",
"targetdate": ""
} <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>我该怎么做？谢谢
回答 5
Stack Overflow用户
发布于 2016-07-28 10:44:34
只需在tr中添加条件，如下所示：
<tr ng-if="milestone.comments && milestone.owner && milestone.targetdate">或者，您也可以使用ng-show而不是ng-if。两者都不会显示该行，唯一的区别是ng-if将从DOM中删除空行，而ng-show将使用CSS类隐藏该行。
编辑：另外，我建议您将ng-repeat条件移动到tr本身(如果您没有特定的需求)。见下面的工作示例：
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>
就像@Ved注释/应答一样，如果引号之间有空格，您也可以这样修改查询：
<tr ng-if="milestone.comments.trim() && milestone.owner.trim() && milestone.targetdate.trim()">如果任何值是未定义/空的，则不会出现任何错误。
Stack Overflow用户
发布于 2016-07-28 10:57:08
您可以查看下面的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>Stack Overflow用户
发布于 2016-07-28 10:46:05
使用吴-如果。这应足以：
<div class="modal-body" ng-repeat="milestone in milestones ">
<table ng-if="milestone.comments" class="table table-striped">页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38634019
复制相关文章
相似问题
腾讯云开发者
