我有一个父ID /子ID ID重复，当我的孩子为空时，我试图显示一条消息。不能让它正常工作。这是我有的：
(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>
然后消息显示在任何地方，即使它不应该。任何人都知道为什么会这样？
你可以改变<html>如下check working plunker：
<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>
如果我正确理解了您要实现的目标，并且希望在过滤后的子项列表为空时显示某些内容。
我做了什么来看看发生了什么是在ExampleController函数的底部添加这些行：
alert(vm.Child_data[0].length);
alert(vm.Child_data[0].length === undefined);
要真正看出价值是否真实。 ng-hide没有按预期工作，因为该值不是真的，无论是child.length === 0还是child.length。
这会让你到目前为止，但是你必须记住你的子循环是在父id上过滤的，所以如果没有父id匹配它根本就不会输入，所以没有孩子的父母根本不会进入循环并且绝不会显示您的无数据消息。
我会通过将子数据作为父数据的属性来解决这个问题，但这取决于您。