Question

我是棱角分明的新人。所以我正在读书只是为了完成我的工作。这样我会尝试，但不确定我是否朝着正确的方向前进？这是我的示例代码

<ul>
    <li ng-repeat="parent in items">{{parent.pitem}}
        <ul>
            <li ng-repeat="child in parent.citems">{{child.pitem }}</li>
        </ul>
    </li>
</ul>

var app = angular.module('myapp', []);

app.controller('MyCtrl', function ($scope) {
    $scope.items = [{ "pitem": "Coffee", "citems": "" }, { "pitem": "Tea", "citems": [{ "pitem": "Black tea", "citems": "" }, { "pitem": "Green tea", "citems": "" }] }, { "pitem": "Milk", "citems": "" }]
});

实际上，我需要像经理及其下属一样显示员工层次结构。

我也读过@zsong https://stackoverflow.com/a/18295177/6188148

所写的同类主题

所以请帮助我使用ul,li使用ng-repeat生成表格输出，最终用户也应该能够展开折叠行。请看看这个网址http://maxazan.github.io/jquery-treegrid/examples/example-bootstrap-3.html我想要类似的输出，但有ng-repeat。

查看此网址http://www.lidorsystems.com/support/articles/angularjs/treegrid/tree-grid-filter.aspx然后可以了解我尝试使用ng-repeat构建的输出类型。

请指导和建议。

Answer 1

这个JSFiddle https://jsfiddle.net/benfosterdev/NP7P5/显示了您正在寻找的内容：

递归

<div ng-app="app" ng-controller='AppCtrl'>
    <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>
    <ul>
        <li ng-repeat="category in categories" ng-include="'categoryTree'"></li>
    </ul>    
</div>

Json对象

$scope.categories = [
  { 
    title: 'Computers',
    categories: [
      {
        title: 'Laptops',
        categories: [
          {
            title: 'Ultrabooks'
          },
          {
            title: 'Macbooks'            
          }
        ]
      },

      {
        title: 'Desktops'
      },

      {
        title: 'Tablets',
        categories: [
          { 
            title: 'Apple'
          },
          {
            title: 'Android'
          }
        ]        
      }
    ]
  },

  {
    title: 'Printers'
  }

];

});

如何使用ng-repeat

1 个答案: