如何用AngularJS将特定格式字符串渲染为嵌套无序列表？

嘿，我来帮你搞定这个嵌套列表的问题！你遇到的核心问题是原始字符串没有转换成AngularJS能识别的嵌套数据结构，直接用ng-repeat肯定会出乱子。咱们一步步来解决：

第一步：把字符串转换成结构化的嵌套数组 #

先在控制器里处理你的messages字符串，把它拆成包含父消息和子消息数组的对象列表，这样ng-repeat才能正确识别层级关系：

// 你的原始消息字符串
$scope.messages = "Message1#Message2#Message3#Message4^Message41^Message42#Message5^Message51^Message52^Message53^Message54^Message55";

// 转换为适合嵌套渲染的结构
$scope.messageTree = $scope.messages.split('#').map(messageItem => {
  // 拆分父消息和子消息
  const splitItems = messageItem.split('^');
  return {
    parentText: splitItems[0],
    children: splitItems.length > 1 ? splitItems.slice(1) : []
  };
});

这段代码会把每个父消息（#分隔的部分）转成一个对象，其中parentText是父消息内容，children是对应的子消息数组（如果有的话）。

第二步：用嵌套ng-repeat渲染列表 #

接下来在HTML模板里，通过两层ng-repeat来实现嵌套的<ul><li>结构，只有当父项有子消息时才渲染子列表：

<ul>
  <li ng-repeat="node in messageTree">
    <!-- 渲染父消息 -->
    {{node.parentText}}
    <!-- 如果有子消息，渲染嵌套的子列表 -->
    <ul ng-if="node.children.length > 0">
      <li ng-repeat="child in node.children">{{child}}</li>
    </ul>
  </li>
</ul>

为什么之前会出错？ #

你之前直接用原始字符串分割后渲染，没有明确区分父、子层级的对应关系，ng-repeat没办法自动关联父项和它的子项，自然会出现嵌套错误或者内容重复的问题。现在把数据转成结构化的对象数组后，每个父项都明确持有自己的子项列表，嵌套ng-repeat就能精准匹配层级了。

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