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

时间:2017-12-18 16:58:50

标签: javascript angularjs

我有一个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>

然后,即使它没有假设,这个消息也随处可见。任何人都知道为什么会这样?

2 个答案:

答案 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匹配,它就不会输入,所以你的父母没有孩子们根本不会进入循环,永远不会显示你的无数据信息。

我会通过将子数据作为父数据的属性来解决这个问题,但这取决于您。