javascript - 使用 angularjs 使用递归函数从 json 数据生成节点树-6ren

javascript - 使用 angularjs 使用递归函数从 json 数据生成节点树

转载作者：行者123 更新时间：2023-11-28 19:06:17

25

4

我想从 json 创建一个节点树。

index.html 应从 person.json 递归加载节点树现在该方法正在进入无限循环。请帮助我。

app.js

(function() {
  var app = angular.module("app", ['directive.cusTree', 'directive.cnode']);
  app.controller("Contrl", function($scope, $http) {
    $scope.some = function() {
      return $http.get('person.json').success(function(data) {
        $scope.nodetree = data;
        return data;
      });
    }
  });
})();

person.json

{
  "person": [{
      "id": 1,
      "name": "A1" ,
      "child": [{
        "id": 1.1,
        "name": "A11",
        "child": [{
          "id": 1.11,
          "name": "A111"
        }, {
          "id": 1.12,
          "name": "A112"
        }, {
          "id": 1.13,
          "name": "A113"
        }]
      }, {
        "id": 1.2,
        "name": "A12"
      }, {
        "id": 1.3,
        "name": "A13",
        "child": [{
          "id": 1.31,
          "name": "A131"
        }, {
          "id": 1.32,
          "name": "A132"
        }, {
          "id": 1.33,
          "name": "A133"
        }]
      }]
    }, {
      "id": 2,
      "name": "B2" 
    }, {
      "id": 3,
      "name": "C3" 
    }, {
      "id": 4,
      "name": "D4" 
    }



  ]
}

item.html

<div ng-click="show(show)" ng-init="show=true" class="container" ng-repeat="node in nodedata" ng-if="nodedata.length>0">
  <ul>
    {{node.name}}
    <br>
    <div ng-if="node.child.length>0">
        <custree nodedata="node.child"> </custree>
    </div>
  </ul>
</div>

index.html

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script src="app.js" type="text/javascript"></script>
  <script src="cusTree.js" type="text/javascript"></script>
   <script src="cnode.js" type="text/javascript"></script>

</head>

<body>

  <div ng-controller="Contrl as n">


    <div ng-init="nodetree=some()">
      <div ng-repeat="node in nodetree">



          <div class="container">

         <custree nodedata="node"> </custree>

        </div>
          <br>
      </div>

    </div>

  </div>

</body>

</html>

cusTree.js

angular.module('directive.cusTree',[])
.directive('custree',function(){

return{
  restrict :'E',
  scope: {

    nodedata:'='

  },
  templateUrl:"item.html",
  controller:function($scope){
//console.log("new="+ JSON.stringify($scope.nodedata));


  }

};




});

最佳答案

如果您使用 AngularJS 创建树，则必须创建如下 2 个指令:

app.directive('nodeTree', function () {
  return {
    template: '<node ng-repeat="node in tree"></node>',
    replace: true,
    restrict: 'E',
    scope: {
      tree: '=children'
    }
  };
});
app.directive('node', function ($compile) {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'partials/node.html', // HTML for a single node.
    link: function (scope, element) {
      /*
       * Here we are checking that if current node has children then compiling/rendering children.
       * */
      if (scope.node && scope.node.children && scope.node.children.length > 0) {
        var childNode = $compile('<ul class="tree" ng-if="!node.visibility"><node-tree children="node.children"></node-tree></ul>')(scope);
        element.append(childNode);
      }
    },
    controller: ["$scope", function ($scope) {
      // This function is for just toggle the visibility of children
      $scope.toggleVisibility = function (node) {
        node.visibility = !node.visibility;
      };
      // Here We are marking check/un-check all the nodes. 
      $scope.checkNode = function (node) {
        node.checked = !node.checked;
        function checkChildren(c) {
          angular.forEach(c.children, function (c) {
            c.checked = node.checked;
            checkChildren(c);
          });
        }
        checkChildren(node);
      };
    }]
  };
});

更多详情您可以查看Github Link ，它有工作演示。

关于javascript - 使用 angularjs 使用递归函数从 json 数据生成节点树，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31607340/

25

4

0

文章推荐： python - 什么是 Flask 中的 HTTP 400 错误请求

文章推荐： javascript - 使一个 Controller 依赖于另一个 Controller 的范围

文章推荐： ios - 应用程序名称已存在于 iTunes Connect 中

JavaFX - 每行迭代 GridPane 节点 - 每行读取 GridPane 节点
我正在使用 JavaFX 8 创建一个应用程序。我使用拖/放动态更改网格 Pane 的内容。我希望每行或每行/列迭代 GridPane 内容。JavaFX 允许通过指定行和列在 GridPane 中添
javascript - 错误:无法在“节点”上执行“appendChild”:参数1不是“节点”类型
我正在尝试将图像拖放到div上。图像没有被拖到div上并给出以下错误 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': pa
java - 如何在 ARcore 的帮助下相对于一个 anchor 定位 anchor /节点/ anchor 节点？
我正在 android studio 中创建内部构建 AR 导航。我正在寻找一种方法将 anchor 与其他 anchor 或 anchor 节点/节点“连接”起来。我不确定使用哪一个。基于我将强制用
hadoop - 我的 2 节点 hadoop 比我的 4 节点 hadoop 表现更好
我在 Hive 上运行一些作业:首先是 4 节点，然后是 2 节点。令我惊讶的是，我的 2 节点性能比我的 4 节点更好。首先，我在一个 4 节点(4 个事件节点)上运行查询，然后关闭 2 个节点(
c++ - ' =' : cannot convert from ' CircularDoubleDirectedList::节点 *' to ' 节点 *'
我有 Node* current ，我在其中存储指向列表“顶部”当前节点的指针。当我将一个新节点设置为当前节点时，出现错误: '=' : cannot convert from 'CircularDo
linux - 无法使用 dcos 节点 ssh --master-proxy --leader sshing 进入 dcos 节点
我是 dcos Mesos 的新手，在本地 Ubuntu 机器上安装了 dc os。我可以查看 dcos 仪表板。但我无法使用 dcos node ssh --master-proxy --lea
JavaFX:如何定位组件/节点？
在 JavaFX 中，是否有类似 setLayout(); 的东西？或 setBounds(); ? 例如，我想将按钮定位到我想要的位置。最佳答案 JavaFX 场景图上的所有内容都是 Node .
JavaFX 节点 - 如何让最终用户调整它们的大小？
我正在开发一个 JavaFX 应用程序，其中我开发的类(从 javafx.scene.Parent 扩展)是根据用户在 ListView 控件中单击的条目动态创建的。只是要清楚这个节点，它不是使用像
uml - 节点-边缘关系的类图
我正在尝试为节点-边缘关系创建一个类图，因为它可以在有向图中找到。我想传达的是，Nodes 引用了 Edges，Edges 也引用了 Nodes。每个 Edge 都恰好需要两个 Node(源和目标)。
hadoop - 如何指定应在其上运行mapreduce的各个tasktrackers(节点)？
在mapreduce作业期间，单个任务将在随机节点上运行，是否有任何方法限制应在其中运行任务的节点？最佳答案 Hadoop不会选择节点来随机运行任务。考虑到数据局部性，否则将有很多网络开销。任务与
Cassandra 节点 - 重建与重建维修
有什么区别: a) nodetool 重建 b) nodetool 修复 [-pr] 换句话来说，各个命令到底是做什么的？最佳答案 nodetool重建:类似于引导过程(当您向集群添加新节点时)，但
java - 节点 : 没有数据类型
我已将第一个 OneToMany 关系添加到我的 hibernate 3.6.10 项目中。这是一个类: /** * */ package com.heavyweightsoftware.leal
javascript - 获取触发事件的元素(节点)
是否有可能找到正在监听触发当前函数的事件的元素？在下面的代码中，event.target 返回 #xScrollPane 和 event.currentTarget 和 event 的最低子节点.f
javascript - 覆盖数据而不生成新的键/节点
我正在尝试覆盖我数据库中的一些数据。结构很简单，就是: recipes { user_1{ recipe_1{data} recipe_2{data} } user_2{
javascript - 输入后运行JS函数，节点
我使用 setInterval 来运行该函数，但它会多次执行函数 2... 如何在输入中插入一个值后执行函数第一个输入与其余输入的距离不同如何在插入 val(tab 选项)后将插入从 1 个输入移
c++ - “节点”不是全局命名空间的成员？
我不知道代码有什么问题，但在 visual studio 中不断收到这些错误消息。 Error 18 error C1903: unable to recover from previous e
JavaScript/jQuery 节点
我正在尝试从其类中获取 SharePoint 搜索导航节点的对象。 var nodes = $("div.ms-qSuggest-listItem"); 我正在获取节点对象，现在想要获取“_promp
javascript - 节点|运行JS文件时出错
D:\nodeP>node main.js module.js:327 抛出错误； ^ 错误:在 Function.Module 的 Function.Module._resolveFilename
c++ - 节点(){}是什么意思？
struct node{ int key, prior, cnt, val; node *l, *r; node(){} node(int nkey) : key(nkey),
c++ - 如何删除正在使用的对象(节点)
我有以下代码使用迭代器将项目插入双链表。这就是我们被要求这样做的方式。代码有效，但问题是我有 24 字节的绝对内存泄漏。 NodeIterator insert(NodeIterator & itrP

首页

博学

6Ren·AI