AngularJS嵌套ul列表和ng-repeat

AngularJS nested ul list and ng-repeat

本文关键字：ng-repeat 列表 ul 嵌套 AngularJS      更新时间：2023-09-26

起初我不得不说我是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>

我收到了一个对象数组（JSON），如下所示：

[{
    "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"
},...]
我需要将父级放在

第一级，将其子级放在第二级，当循环找到另一个父级时，它应该创建另一个一级li依此类推。

我需要将样式属性（父级）与名称属性（子级）相关联当 ng-repeat 找到另一个父值时，如何强制它返回到第一级？

我知道

这个问题有点旧，但我认为这是管理嵌套列表的好解决方案，在我看来它更"干净"的方式。

这是一位博主的链接，他以角度发布了有关递归模板的信息。当您不知道分层列表的深度时，此方法非常有用：

angularjs-recursive-templates

分层列表：

[ 
{ 
    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>

你可以在这个JSFiddle中看到决赛。

我希望这可能会对一些人有所帮助。

啧啧！

我的建议是在模型中处理这种情况，而不是在正面处理。

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

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

<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', []);
app.controller('myCtrl', function($scope) {
  $scope.list = [{
    "id": 53,
    "nazwa": "Plafon Nekko",
    "foto": "01/01 _ Koma Nekko.jpg",
    "visible": 0,
    "cat_id": 1,
    "strona": 1,
    "styl": "nowoczesny",
    "rodzina": "Nekko",
    "kod": "O2177",
    "children": [{
      "name": "xyz",
      "age": "15"
    }, {
      "name": "pqr",
      "age": "10"
    }],
    "tags": "nowoczesny Koma O2180"
  }];
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="parent in list">{{parent.nazwa}}
      <ul>
        <li ng-repeat="child in parent.children">{{child.name }}</li>
      </ul>
    </li>
  </ul>
</div>

相关文章：