1

いくつかの AngularJS の例を見ていくうちに、繰り返して構造を作成することがいかに簡単であるかがわかります。ただし、次の方法を理解できませんでした。

次のようなjson構造があるとします

    {
    "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'
            ]
         },
      ]
   }
];

そうは言っても...あなたがやろうとしているように聞こえるのは、ある種の再帰ツリーディレクティブを作成することです。それは少しトリッキーになります。再帰的に調べることができるように、構造を少し正規化する必要があります。次に、2 つのディレクティブを作成する必要があります。1 つはリスト用、もう 1 つはアイテム用です。

これが私が意味することの例です...

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 に答える