我有一个Parent ID / Child ID ng-repeat,当我的孩子为空时,我试图显示一条消息。不能让它正常工作。这就是我所拥有的:
(function() {
'use strict';
angular
.module('exampleApp', [])
.controller('ExampleController', ExampleController);
function ExampleController() {
var vm = this;
vm.Parent_data = [{
"id": "1234",
"ParentDetails": "Data and stuff here"
}, {
"id": "5423",
"ParentDetails": "Data and stuff here"
}, {
"id": "65342",
"ParentDetails": "Data and stuff here"
},{
"id": "7890",
"ParentDetails": "Data and stuff here"
}]
vm.Child_data = [{
"id": "1",
"listId": "1234",
"ChildDetails": "Data and stuff here"
}, {
"id": "2",
"listId": "5423",
"ChildDetails": "Data and stuff here"
}]
}
ExampleController.$inject = [];
})();
以下是HTML标记示例:
<!DOCTYPE html>
<html ng-app='exampleApp'>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
</head>
<body ng-controller="ExampleController as vm">
<table>
<tbody ng-repeat="parent in vm.Parent_data">
<tr>
<td> Parent details here: {{ parent.ParentDetails }} </td>
</tr>
<tr>
<td>
<table>
<tbody ng-repeat="child in vm.Child_data | filter:{ listId: parent.id }">
<tr>
<td>
<p >Details: {{child.ChildDetails}}</p>
</td>
</tr>
<tr ng-show="child.length === 0">
<td>
No data to show here ...
</td>
</tr>
<tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
出于某种原因,我的“没有数据显示在这里......”没有显示出来。然后我尝试了这个:
<tr ng-hide="child.length">
<td>
No data to show here ...
</td>
</tr>
然后,即使它没有假设,这个消息也随处可见。任何人都知道为什么会这样?
答案 0 :(得分:3)
您可以按照以下check working plunker更改<html>
:
<table>
<tbody ng-repeat="parent in vm.Parent_data">
<tr>
<td> Parent details here: {{ parent.ParentDetails }} </td>
</tr>
<tr>
<td>
<table>
<tbody ng-repeat="child in filteredChildren = (vm.Child_data | filter:{ listId: parent.id })">
<tr>
<td>
<p>Details: {{child.ChildDetails}}</p>
</td>
</tr>
<tbody>
<tbody>
<tr>
<td>
<p ng-show="!filteredChildren.length">Nothing here!</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
如果我正确理解了您要实现的目标,并且您希望在过滤后的子项列表为空时显示某些内容。
答案 1 :(得分:2)
我做了什么来查看发生的事情是在ExampleController函数的底部添加这些行:
alert(vm.Child_data[0].length);
alert(vm.Child_data[0].length === undefined);
要真正了解这些值是否真实。 ng-hide没有按预期工作,因为该值不是真的,无论是child.length === 0还是child.length。
这会让你到目前为止,但你必须记住,你的子循环是根据父ID过滤的,所以如果没有父ID匹配,它就不会输入,所以你的父母没有孩子们根本不会进入循环,永远不会显示你的无数据信息。
我会通过将子数据作为父数据的属性来解决这个问题,但这取决于您。