web-dev-qa-db-ja.com

Angular JSはJSONをツリーのような形式でレンダリングします

http://jsonviewer.stack.hu/ angular JS？

javascriptangularjsangularjs-directiveangular-uiangular-ui-bootstrap
15
Bourne

興味のあるテクニックは '再帰ディレクティブ'です。ディレクティブの書き方がまだわからない場合は、まずそれを学び始める必要があります。公式のAngular JSドキュメントはディレクティブについての説明が大幅に改善されました カスタムディレクティブの作成

カスタムディレクティブの記述方法がわかれば、再帰ディレクティブについて学ぶことができます。このGoogleグループスレッドが役に立ちました： 再帰的ディレクティブ 。特に、そのスレッドでMarkLagendijkのRecursionHelperサービスが非常に役立つことがわかりました。

そこにある例を必ずチェックしてください。あなたに関連するいくつかの例は次のとおりです。

plnkr
jsfiddle

上記のjsfiddleの例で、以下を見てください。

module.directive("tree", function($compile) {
    return {
        restrict: "E",
        transclude: true,
        scope: {family: '='},
        template:       
            '<ul>' + 
                '<li ng-transclude></li>' +
                '<p>{{ family.name }}</p>' + 
                '<li ng-repeat="child in family.children">' +
                    '<tree family="child"></tree>' +
                '</li>' +
            '</ul>',
        compile: function(tElement, tAttr, transclude) {
            var contents = tElement.contents().remove();
            var compiledContents;
            return function(scope, iElement, iAttr) {
                if(!compiledContents) {
                    compiledContents = $compile(contents, transclude);
                }
                compiledContents(scope, function(clone, scope) {
                         iElement.append(clone); 
                });
            };
        }
    };
});

上記のコードの一部は、前述のMarkLagendijkのRecursionHelperサービスによって抽象化されています。

最後に、angular-json-humanを実装しました。これは、ネストされたテーブル構造でJSONをレンダリングし、人間が読みやすくします。必要に応じて変更できます。デモは ここ で、リポジトリは ここ です

お役に立てれば！

21
Brian Park

JSONを適切な方法でレンダリングするためにこれをAngularディレクティブにしました。bowerで利用できます：

https://github.com/mohsen1/json-formatter

enter image description here

24
Mohsen

私はangular-ui-treeコンポーネントにJSONデータを表示する関数を作成しました。

重要なポイントは次のとおりです。

解析ルーチンでは、現在のノードの「JSON文字列」をノード自体に保持します。「解析されていない」すべてのノードには、このペイロードと「ロード」関数があります。

function parse(name, value) {

  var node = {
    name: name
  };

  if (Array.isArray(value)) {
    node.isEmpty = value.length === 0;
    node.payload = value;
    node.props = [];
    node.load = function(node) {
      for (var i = 0; i < node.payload.length; i++) {
        node.props.Push(parse(node.name + '[' + i + ']', node.payload[i]));
      }
      delete node.isEmpty;
      delete node.payload;
    }
  } else if (value !== undefined && value !== null && typeof value === 'object') {
    node.isEmpty = Object.keys(value).length === 0;
    node.payload = value;
    node.props = [];
    node.load = function(node) {
      var keys = Object.keys(node.payload);
      for (var i = 0; i < keys.length; i++) {
        node.props.Push(parse(node.name + '.' + keys[i], node.payload[keys[i]]));
      }
      delete node.isEmpty;
      delete node.payload;
    }
  } else {
    node.value = value;
  }

  return node;
}

次に、ユーザーがトグルボタンをクリックすると、この関数を呼び出してツリー内の次のノードを解析し、データをHTMLにバインドできます。

例を使用すると、より明確になります。 https://jsfiddle.net/MatteoTosato/ghm4z606/

1
Matteo Tosato