Angular 嵌套的 ng-repeats 与 json 调用不工作

Angular Nested ng-repeats with json call not working

我正在尝试使用 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>

这是结果:我的群组进入但没有嵌套系统

我得到了父项列表,但没有子项。

我当然希望得到一些指导,因为到目前为止我尝试遵循的所有代码示例都不起作用!

Systems 是组内的数组,因此如果您不在组内迭代系统,您将看不到任何子项。

你必须把你的 system in group.systems 放在 里面 group in addUserMulti.groups 块。

试试这个:

<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 存在。