如何在Caph父列表的每个项中嵌入含两项的子列表？

It looks like your code snippet was cut off, but I can help you implement a complete version where each parent caph-list item contains a horizontal sublist with two child items. Here's a working example tailored to your needs:

<caph-list container-class="list mt-1 ml-5" items="item in items" direction="horizontal">
  <div class="item ml-1" focusable 
       on-focused="focus($event, $index)" 
       on-blurred="blur($event)" 
       on-selected="select($event, $index)" 
       id="{{ 'item-' + $index }}">
    <!-- Optional parent item label -->
    <span class="parent-item-label">{{ item.parentLabel }}</span>
    
    <!-- Nested sublist with two items per parent -->
    <caph-list container-class="list button-list ml-5" items="button in item.subButtons" direction="horizontal">
      <div class="sublist-item p-2" focusable 
           on-focused="handleSubFocus($event, $parent.$index, $index)" 
           on-selected="handleSubSelect($event, $parent.$index, $index)">
        <img class="img-1 mt-2" src="{{ button.iconUrl }}" alt="{{ button.subLabel }}">
        <span class="sub-item-text">{{ button.subLabel }}</span>
      </div>
    </caph-list>
  </div>
</caph-list>

Key Implementation Notes: #

• Data Structure: Your items array needs a subButtons property for each parent item, holding exactly two entries for the sublist. Example controller data:

  $scope.items = [
    {
      parentLabel: "Main Item 1",
      subButtons: [
        { iconUrl: "/assets/icon-play.png", subLabel: "Play" },
        { iconUrl: "/assets/icon-info.png", subLabel: "Info" }
      ]
    },
    {
      parentLabel: "Main Item 2",
      subButtons: [
        { iconUrl: "/assets/icon-save.png", subLabel: "Save" },
        { iconUrl: "/assets/icon-delete.png", subLabel: "Delete" }
      ]
    }
  ];
  

• Event Handling: I added $parent.$index to sublist event handlers so you can track both the parent item index and sub-item index when interactions occur—critical for TV remote navigation in Caph.
• Styling: Adjust classes like mt-1, ml-5, sublist-item to match your layout needs; these ensure proper spacing between parent and sublist elements.
• Focus Management: Ensure your Caph configuration allows nested focusable elements—test remote control navigation to confirm both parent and sublist items are accessible.

内容的提问来源于stack exchange，提问作者iSpithash