Question

起初我不得不说我是AngularJS的新手，但我必须修改一个网络应用程序，即将列表嵌入另一个：

<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，依此类推。

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

Answer 1

我知道这个问题有点陈旧，但我认为这是管理嵌套列表的一个很好的解决方案，在我看来，它更“干净”。

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

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

中看到最终结果

我希望这可以帮助一些人。

Tchuss！

Answer 2

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

您可以创建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">
        ...

Answer 3

您也可以这样做。你可以在你的json中添加一些子元素并循环遍历它。

＆＃13;

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"
  }];
});

＆＃13;

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

＆＃13;

AngularJS嵌套ul列表和ng-repeat

3 个答案: