AngularJS-嵌套子ngrepeat为空时如何显示消息。

Question

I have a Parent ID/Child ID ng-repeat that where I am trying to display a message when it's child is empty. 我有一个父ID /子ID ng-repeat，该子项在我的孩子为空时试图显示一条消息。 Cant quite get this to work correctly. 不能完全使它正常工作。 Here is what I have: 这是我所拥有的：

(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 = [];
})();

Here is the HTML markup example: 这是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>

For some reason, my " No data to show here ..." does not show up. 由于某种原因，我的“没有要显示的数据...”没有出现。 I then tried this: 然后我尝试了这个：

<tr ng-hide="child.length">
    <td>
        No data to show here ...
    </td>
</tr>

Then the messge shows up everywhere even when its not suppose to. 然后，即使没有想到，消息也随处可见。 Anyone have any idea why this would be? 有人知道为什么会这样吗？

Answer 1

You can change <html> as follows check working plunker : 您可以如下更改<html> ，检查可工作的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>

If I understood correctly what you are trying to achieve and you want to show something when list of filtered children is being empty. 如果我正确理解了您要实现的目标，并且想要在过滤的孩子列表为空时显示一些内容。

Answer 2

What I did to see what is happening is add these lines at the bottom of your ExampleController function: 我所做的工作是将这些行添加到ExampleController函数的底部：

alert(vm.Child_data[0].length);
alert(vm.Child_data[0].length === undefined);

To really see if the values are truthy or not. 真正了解这些值是否真实。 The ng-hide didn't work as expected because the value is not truthy, whether its child.length === 0 or child.length. ng-hide未能按预期方式工作，因为其值不真实，无论其child.length === 0还是child.length。

This will get you so far, but you have to remember that your child loop is filtered on parent id, so if no parent id's match it won't enter at all, therefore your parents with no children won't enter the loop at all and will never show your no data message. 这将带您到目前为止，但您必须记住，您的子循环是根据父ID过滤的，因此，如果没有父ID匹配，根本就不会输入，因此没有孩子的父母根本不会进入循环。并且永远不会显示您的无数据信息。

I would solve this by making the child data a property on the parent data, but that's up to you. 我可以通过将子数据作为父数据的属性来解决此问题，但这取决于您。

AngularJS-嵌套子ngrepeat为空时如何显示消息。

问题描述

2 个解决方案

解决方案1
3 已采纳 2017-12-18 17:15:46

解决方案2
2 2017-12-18 17:15:42

AngularJS-嵌套子ngrepeat为空时如何显示消息。

问题描述

2 个解决方案

解决方案1 3 已采纳 2017-12-18 17:15:46

解决方案2 2 2017-12-18 17:15:42

解决方案1
3 已采纳 2017-12-18 17:15:46

解决方案2
2 2017-12-18 17:15:42