Question

我正在尝试使用ng-repeat和json文件创建一个这样的嵌套列表：

    [] Pizza King North Region
       [] Pizza King 102 
       [] Pizza King 103    
       [] Pizza King 104
   [] Pizza King South Region     
      [] Pizza King 201    
      [] Pizza King 202
   [] Pizza King East Region   
      [] Pizza King 203    
      [] Pizza King 204   
   etc...

这是我的json对象

 {
  "groups": [
    {
      "group_id": "Pizza King North Region",
      "systems" : [
        {
          "panel_id": "Pizza King 101"
        },
        {
          "panel_id": "Pizza King 102"
        },
        {
          "panel_id": "Pizza King 103"
        },
        {
          "panel_id": "Pizza King 104"
        }
      ]
    },
    {
      "group_id": "Pizza King South Region",
      "systems" : [
        {
          "panel_id": "Pizza King 101"
        },
        {
          "panel_id": "Pizza King 102"
        },
        {
          "panel_id": "Pizza King 103"
        },
        {
          "panel_id": "Pizza King 104"
        }
      ]
    },
    {
      "group_id": "Pizza King East Region",
      "systems" : [
        {
          "panel_id": "Pizza King 101"
        },
        {
          "panel_id": "Pizza King 102"
        },
        {
          "panel_id": "Pizza King 103"
        },
        {
          "panel_id": "Pizza King 104"
        }
      ]
    },
    {
      "group_id": "Pizza King West Region",
      "systems" : [
        {
          "panel_id": "Pizza King 101"
        },
        {
          "panel_id": "Pizza King 102"
        },
        {
          "panel_id": "Pizza King 103"
        },
        {
          "panel_id": "Pizza King 104"
        }
      ]
    }
  ],
  "systems": [
    {
      "panel_id": "Pizza King 101"
    },
    {
      "panel_id": "Pizza King 102"
    },
    {
      "panel_id": "Pizza King 103"
    },
    {
      "panel_id": "Pizza King 104"
    }
  ]
}

这就是我将它带入控制器中的应用程序的方式：

    App.controller('AddUserMultiCtrl', ['$rootScope', '$scope', '$http', '$modal', function ($rootScope, $scope, $http, $modal) {

  var addUserMulti = this; // controllerAs
  console.clear();

  $http.get('app/users/data-temp/systems.json')
    .success(function(response) {
      addUserMulti.groups = response.groups;
      addUserMulti.systems = response.systems;
    })
    .error(function (data) {
      console.log("Error retrieving user data.");
    });

这是我的HTML：

<ul class="nav">

  <li ng-repeat="group in addUserMulti.groups">
    <label class="checkbox checkbox-inline c-checkbox"> <input id="inlineCheckbox1" type="checkbox"
      value="option1"/><span class="fa fa-check"></span><strong>{{group.group_id}}</strong></label><i class="fa fa-angle-down fa-2x pull-right"></i>
  </li>
  <ul class="nav">
    <li ng-repeat="system in group.systems">
      <label class="checkbox checkbox-inline c-checkbox"> <input id="{{ system.panel_id }}" type="checkbox"
        value="option1">{{ system.panel_id }} </label>
    </li>
  </ul>
</ul>

结果如下：我的群组进入但没有嵌套系统

我得到一个父项列表，但没有孩子。

我肯定会对此有所了解，因为我试图遵循的所有代码示例到目前为止都没有工作！

Answer 1

系统是一个组内的数组，所以如果你不在组内迭代系统，你就不会看到任何孩子。

您必须将system in group.systems阻止置于<{1}}阻止内。

Answer 2

试试这个：

<ul class="nav">

  <li ng-repeat="group in addUserMulti.groups">
    <label class="checkbox checkbox-inline c-checkbox"> <input id="inlineCheckbox1" type="checkbox"
      value="option1"/><span class="fa fa-check"></span><strong>{{group.group_id}}</strong></label><i class="fa fa-angle-down fa-2x pull-right"></i>

    <ul class="nav">
      <li ng-repeat="system in group.systems">
        <label class="checkbox checkbox-inline c-checkbox"> <input id="{{ system.panel_id }}" type="checkbox" ="option1">{{ system.panel_id }} </label>
      </li>
    </ul>

  </li>      
</ul>

这样，群组已正确嵌套，因此group.systems存在。

使用json调用的Angular Nested ng-repeats不起作用

2 个答案: