Javascript AngularJS嵌套ul列表和ng重复

首先，我必须说我是AngularJS新手，但我必须修改一个web应用程序，即将列表嵌套在另一个应用程序中：

<ul class="first-level">
  <li ng-repeat="item in list">{{item.parentNo1}}
     <ul class="level-2">
       <li ng-repat="item in list">{{item.childOfCurrentParent}}</li>
       . . .
     </ul>
  </li>

  <li ng-repeat="item in list">{{item.parentNo2}}
     <ul class="level-2">
       <li ng-repat="item in list">{{item.childOfCurrentParent}}</li>
       . . .
     </ul>
  </li>
</ul>

我需要将父级放在第一级，子级放在第二级，当循环找到另一个父级时，它应该创建另一个第一级

li

，依此类推

我需要将样式属性（父级）与名称属性（子级）相关联

---

当ng repeat找到另一个父值时，我如何强制它返回到级别1？

我的建议是在模型中处理这种情况，而不是在前端处理

您可以创建两个自定义函数，根据需要返回模型

然后你可以这样称呼他们：

[{
    "id": 53,
    "nazwa": "Plafon Nekko",
    "foto": "01/01 _ Koma Nekko.jpg",
    "visible": 0,
    "cat_id": 1,
    "strona": 1,
    "styl": "nowoczesny",
    "rodzina": "Nekko",
    "kod": "O2177",
    "bookmark": true,
    "title": "nowoczesny Nekko",
    "page": 1,
    "image": "/lemir/www//gazetka/01/01 _ Koma Nekko.jpg",
    "width": 849,
    "height": 1201,
    "tags": "nowoczesny Koma O2180 Plafon Koma nowoczesny Koma O2181 Plafon Koma nowoczesny Koma O2182 Plafon Koma nowoczesny Koma O2183 Plafon Koma nowoczesny Koma O2184 Plafon Koma nowoczesny Koma O2185 Plafon Koma nowoczesny Koma O2186 Plafon Koma nowoczesny Koma O2187 Plafon Koma nowoczesny Nekko O2170 Plafon Nekko nowoczesny Nekko O2171 Plafon Nekko nowoczesny Nekko O2172 Plafon Nekko nowoczesny Nekko O2173 Plafon Nekko nowoczesny Nekko O2174 Plafon Nekko nowoczesny Nekko O2175 Plafon Nekko nowoczesny Nekko O2176 Plafon Nekko nowoczesny Nekko O2177 Plafon Nekko"
},...]

<ul ng-repeat="parent in getParents(items)">
    ...
    <ul ng-repeat="child in getChildren(items, parent)">
        ...

...

...

或者，如果您可以控制Json格式，那么更简单的解决方案就是根据您的需要对其进行更改。您可以将其更改为一个父数组。然后让每个父级包含一个子级数组

然后事情会变得简单得多；比如：

<ul ng-repeat="parentItem in items">
    ...
    <ul ng-repeat="childItem in parentItem.children">
        ...

...

...

您也可以这样做。您可以将子数组添加到json中并在其中循环

var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.list=[{
“id”：53，
“nazwa”：“Plafon Nekko”，
“foto”：“01/01_komanekko.jpg”，
“可见”：0，
“cat_id”：1，
“斯特罗纳”：1，
“styl”：“nowoczesny”，
“rodzina”：“Nekko”，
“kod”：“O2177”，
“儿童”：[{
“名称”：“xyz”，
“年龄”：“15”
}, {
“名称”：“pqr”，
“年龄”：“10”
}],
“标签”：“nowoczesny Koma O2180”
}];
});


{{parent.nazwa}

{{child.name}



我知道这个问题有点老了，但我认为这是管理嵌套列表的一个很好的解决方案，而且我认为这是一种更“干净”的方式

这里是一位博客作者的链接，他在angular中发布了递归模板。当您不知道层次列表的深度时，此方法非常有用：

[ 
{ 
    title: 'Computers',
    categories: [
      {
        title: 'Laptops',
        categories: [
          {
            title: 'Ultrabooks'
          },
          {
            title: 'Macbooks'            
          }
        ]
      },
      {
        title: 'Desktops'
      },
      {
        title: 'Tablets',
        categories: [
          { 
            title: 'Apple'
          },
          {
            title: 'Android'
          }
        ]        
      }
    ]
  },
  {
    title: 'Printers'
  }
]


分层列表：

[ 
{ 
    title: 'Computers',
    categories: [
      {
        title: 'Laptops',
        categories: [
          {
            title: 'Ultrabooks'
          },
          {
            title: 'Macbooks'            
          }
        ]
      },
      {
        title: 'Desktops'
      },
      {
        title: 'Tablets',
        categories: [
          { 
            title: 'Apple'
          },
          {
            title: 'Android'
          }
        ]        
      }
    ]
  },
  {
    title: 'Printers'
  }
]

他的棱角样本：

<!-- recursive template -->
<script type="text/ng-template" id="categoryTree">
    {{ category.title }}
    <ul ng-if="category.categories">
        <li ng-repeat="category in category.categories" ng-include="'categoryTree'">           
        </li>
    </ul>
</script>
<!-- use -->
<ul>
     <li ng-repeat="category in categories" ng-include="'categoryTree'"></li>
</ul>


{{category.title}}








你可以在这里看到决赛

我希望这能帮助一些人

胡斯
 您提供的JSON没有显示任何子-父关系的迹象。那么，您建议我向JSON添加什么属性？我需要将样式属性（父级）与名称属性（子级）关联起来。你能给我一些定制函数的简单示例吗？你有Json结构吗？如果是的话，你可以直接改变它以满足你的需要。是的，我有，我应该如何改变它？上面我从JSON文件中放入了一个对象。rest对象中的所有属性都相同。“Styl”是父对象，“rodzina”是子对象。只需将其更改为父对象数组即可。然后让每个父级包含一个子级数组。谢谢您确认我需要像您所说的那样更改json文件，并使用ng repeat指令和上面示例中的函数？