1

在浏览一些 AngularJS 示例时，我看到重复和创建结构是多么容易。但是，我无法弄清楚如何执行以下操作。

假设我们有一个像

    {
    "Asia": {
            "India": {
                    "Bangalore": {},
                    "Mumbai": {},
                    "New Delhi": {}
            },
            "China": {
                    "Beijing": {},
                    "Shanghai": {}
            }
    },
    "Europe": {
            "France": {
                    "Paris": {}
            },
            "Germany": {
                    "Berlin": {}
            }
    }
    }

我想要做的是 - 将此 JSON 结构转换为无序列表 -这种结构的深度未知，并且可能更深。如何使用 Angular JS 动态执行重复？

4

2 回答 2

4

您的 JSON 结构不佳，您使用属性名称来承载数据。

你真正想要的是这样的：

$scope.continents = [
   { 
      name: 'Asia',
      countries: [
         {
            name: 'India',
            cities: [
               'Bangalore',
               'Mumbai',
               'New Delhi'
            ]
         },
         {
            name: 'China',
            cities: [
               'Beijing',
               'Shanghai'
            ]
         },
      ]
   },
   { 
      name: 'Europe',
      countries: [
         {
            name: 'France',
            cities: [
               'Peris'
            ]
         },
         {
            name: 'Germany',
            cities: [
               'Berlin'
            ]
         },
      ]
   }
];

也就是说......听起来你想要做的是创建某种递归树指令。这有点棘手。您需要稍微标准化您的结构，以便递归地检查它。然后你必须创建两个指令。一个用于列表，一个用于项目：

这是我的意思的一个例子......

function Item(name, items) {
  this.name = name;
  this.items = items || [];
}

app.controller('MainCtrl', function($scope) {
  $scope.items = [
    new Item('test'),
    new Item('foo', [
        new Item('foo-1'),
        new Item('foo-2', [
            new Item('foo-2-1'),
            new Item('foo-2-2')
          ])
      ]),
    new Item('whatever')
    ];
});

app.directive('tree', function() {
  return {
    template: '<ul><tree-node ng-repeat="item in items"></tree-node></ul>',
    restrict: 'E',
    replace: true,
    scope: {
      items: '=items'
    }
  };
});

app.directive('treeNode', function($compile) {
  return { 
    restrict: 'E',
    template: '<li>{{item.name}}</li>',
    link: function(scope, elm, attrs) {
      //MAGIC HERE!!!: this will do the work of inserting the next set of nodes.
      if (scope.item.items.length > 0) {
        var children = $compile('<tree items="item.items"></tree>')(scope);
        elm.append(children);
      }
    }
  };
});
于 2012-10-31T23:31:50.583 回答
2

如果有人对“最省力”的方式感兴趣而无需创建指令（不是你不应该这样做，而是提供一个变体），这里有一个简单的例子：

http://jsbin.com/hokupe/1/edit

这里还有一篇博客文章和一个 10-15 分钟的视频，介绍它是如何工作的：

http://gurustop.net/blog/2014/07/15/angularjs-using-templates-ng-include-create-infinite-tree/

示例代码：

  <script type="text/ng-template" id="treeLevel.html">
    <ul>
      <li ng-repeat="item in items">
        <input type="checkbox"
          name="itemSelection"
          ng-model="item._Selected" />
        {{item.text}}
        <div ng-include=" 'treeLevel.html'"
            onload="items = item.children">
        </div>
      </li>
    </ul>
  </script>
  <div ng-include=" 'treeLevel.html' "
       onload="items = sourceItems">
  </div>
于 2014-07-15T04:02:20.087 回答