在 Laravel Blade 文件中的多个数组上使用 foreach 循环对齐 UI 元素时出现问题答案

【问题标题】：Problem aligning U.I elements using a foreach loop on multiple arrays in Laravel Blade file在 Laravel Blade 文件中的多个数组上使用 foreach 循环对齐 UI 元素时出现问题
【发布时间】：2019-05-23 09:07:35
【问题描述】：

我正在开发一个 Laravel 应用程序，从后端获取一些数据并存储在 3 个单独的变量中。接下来我将变量传递给视图，并需要以层次结构/树状结构的形式在视图上显示数据级别 1（称为 asm 的变量中的数组）为最高级别，级别 2（变量 usm 中的数组）低于级别 1，级别 3（变量中的数组）低于级别 2。

我尝试在标记上使用 foreach 循环，但它并没有显示预期的结果。基本上，当用户单击级别 1 时，所有级别 1 数据（动态显示）都应关闭，相应级别 2 应折叠/打开，当单击级别 2 时，相应级别 3 应在其下方打开。

基本上布局应该类似于此链接中的布局：

https://www.bootply.com/DglnYJTSKA

级别 1（存储在变量 asm 中）

array:4 [▼
  0 => array:3 [▼
    "id" => "157"
    "unit_sales" => array:7 [▶]
    "policies" => array:3007 [▶]
  ]
  1 => array:3 [▼
    "id" => "73401"
    "unit_sales" => array:8 [ …8]
    "policies" => array:2226 [ …2226]
  ]
  2 => array:3 [▼
    "id" => "0"
    "unit_sales" => array:1 [ …1]
    "policies" => array:162 [ …162]
  ]
  3 => array:3 [▼
    "id" => "76300"
    "unit_sales" => array:1 [ …1]
    "policies" => array:1 [ …1]
  ]
]

2级（存储在变量usm中）

array:4 [▼
  0 => array:3 [▼
    "id" => "74696"
    "ag" => array:13 [▶]
    "pol" => array:481 [▶]
  ]
  1 => array:3 [▼
    "id" => "1525"
    "ag" => array:8 [▶]
    "pol" => array:357 [▶]
  ]
  2 => array:3 [▼
    "id" => "47060"
    "ag" => array:1 [▶]
    "pol" => array:124 [▶]
  ]
  3 => array:3 [▼
    "id" => "74695"
    "ag" => array:3 [▶]
    "pol" => array:5 [▶]
  ]
]

第 3 级（存储在变量 ag 中）

array:4 [▼
  0 => array:2 [▼
    "ag" => "75**"
    "pol" => array:4 [▶]
  ]
  1 => array:2 [▼
    "ag" => "9***"
    "pol" => array:27 [▶]
  ]
  2 => array:2 [▼
    "ag" => "67***"
    "pol" => array:8 [▶]
  ]
  3 => array:2 [▼
    "ag" => "224"
    "pol" => array:147 [▶]
  ]
]

尝试在刀片上使用的 Foreach 循环

<div id="MainMenu">
    <div class="list-group panel">
      <!-- Level 1 -->
      @foreach($asm as $a)
       <a href="#demo3" class="list-group-item list-group-item" data-toggle="collapse" data-parent="#MainMenu" style="color: #868ba1;"> ASM ID : {{ $a['id'] }} <i class="fa fa-caret-down"></i></a>

          <div class="collapse" id="demo3">
          <!-- Level 2 -->
          @foreach($usm as $u)

        <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1"> USM ID : {{ $u['id'] }} <i class="fa fa-caret-down"></i></a>

        <div class="collapse list-group-submenu" id="SubMenu1">
            <!-- Level 3 -->
           @foreach($ag as $Agt)
            <a href="#SubSubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubSubMenu1"> Ag: {{ $Agt['ag'] }}<i class="fa fa-caret-down"></i></a>
          @endforeach
          <!-- END level 3-->
        </div>
            @endforeach 
            <!--END level 2-->
          </div>

      @endforeach
      <!-- END level 1-->
    </div> 
</div>

【问题讨论】：

标签： laravel twitter-bootstrap foreach iteration

【解决方案1】：

这可能是由 #SubMenu1、demo3 等 id 引起的首先，检查您的视图以显示该级别的目标 id 是否指向另一个级别。您可以通过$loop->iteration 在模板中动态更改id，例如demo{{$loop->iteration }}

【讨论】：